随 着 网 络 信息 技术 的 广泛 应 用 ， 互 联网 作为 重要 的 媒体 使 全 球 信息 共享 成 为 现实 ， 它 正 逐 渐 改 变 人 们 的 生活 和 工作 方式 。 面 对 扑面 而 来 的 网 络 浪潮 ， 个 人 、 企 业 等 纷纷 建立 自己 的 网 站 ， 利 用 网 站 来 宣 
传 自 己 ， 提 高 知名 度 ， 寻 找 新 的 商机 。 一 个 设计 精美 的 网 站 ， 不 仅 能 够 带 来 视觉 上 的 体验 ， 还 能 够 发 掘 潜在 的 网 络 客户 ， 因 而 网 站 建设 成 为 很 多 企业 越 来 越 重视 的 问题 。 网 站 建设 涉及 的 技术 繁多 ， 而 很 多 
网 站 建设 人 员 仅 了 解 某 方面 的 知识 ， 没 有 全 面 了 解 网 站 建设 必需 的 各 种 技术 ， 从 而 缺乏 全 局 意识 ， 不 具备 综合 的 网 站 建设 能 力 。 


本 书 主要 内 容 


网 站 制作 工作 包括 网 站 策划 、 网 页 图 像 设计 、 网 页 页 面 排版 、 网 页 动画 设计 、 动 态 网 站 开发 、 网 站 的 推广 运作 等 。 能 够 系统 掌握 这 些 知 识 的 网 页 设计 师 相 对 较 少 ， 市 场 上 虽然 有 不 少 网 页 制作 设计 的 图 
书 ， 但 是 很 多 都 是 纯粹 地 讲解 Dreamweaver、Photoshop 等 网 页 设计 软件 的 使 用 方法 ， 并 没有 讲述 网 站 建设 的 全 部 过 程 和 知识 ， 基 于 这 一 需求 ， 我 们 编写 了 本 书 。 


本 书 以 目前 最 受 大 众 欢迎 的 Dreamweaver、Photoshop 软 件 的 CC 版 本 为 工具 ， 详 细 介绍 了 网 页 设计 与 网 站 制作 的 原理 和 常用 技巧 ， 还 介绍 了 HTML5、Javascript 语 言 。 全 书 共 分 19 章 ， 主 要 内 容 包 
括 : 网 页 设计 与 网 站 制作 基础 ，Dreamweaver CC 创建 基本 文本 网 页 ， 用 图 像 和 多 媒体 美化 网 页 ， 使 用 表格 布局 排版 网 页 ， 使 用 模板 和 库 批 量 制作 风格 统一 的 网 页 ， 使 用 CSS+ DIV 布局 网 页 ， 使 用 行为 设计 
动感 特效 网 页 ， 动 态 网 站 设计 基础 ，Photoshop CC 制作 网 页 图 像 ， 网 页 切片 输出 与 动画 制作 ，Photoshop 网 页 图 像 设 计 ，JavaScript 基 础 知识 ，JavaScript 程 序 核心 语法 ，JavaScript 中 的 对 象 和 事 
件 ，HTML 入 门 ，HTML5 基 础 ， 设 计 企业 宣传 型 网 站 ， 申 请 域名 和 空间 ， 网 站 的 测试 、 上 传 与 维护 。 


本 书 的 特色 和 价值 


` 系统 全 面 : 本 书 涵盖 了 网 页 设计 与 网 站 建设 在 实际 工作 中 需要 重点 掌握 的 所 有 方面 ， 包 含 HTML 标 记 语 言 的 应 用 、JavaScript 脚 本 编程 、CSS 样 式 表 语言 、DIV+CSS 布 局 技术 、Photoshop 图 像 处 理 软件 的 


使 用 ， 同 时 详细 介绍 了 Dreamweavet 网 站 建设 工具 、 申 请 域名 和 空间 、 网 站 的 推广 及 网 站 的 日 常 维护 等 知识 点 。 

` 实战 性 强 : 采用 Step by Step 的 制作 流程 进行 讲解 ， 全 面 剖 析 网 页 设计 与 网 站 建设 的 制作 方法 ， 使 读者 在 短 时 间 内 轻松 上 手 ， 举 一 反 三 。 读 者 只 需要 根据 这 些 操作 步骤 一 步 步 地 制作 ， 完 全 可 以 制作 出 
具有 各 种 功能 的 动态 网 站 。 

` 实例 丰富 : 全 书 由 不 同行 业 中 的 实例 组 成 ， 各 实例 均 经 过 精心 设计 ， 操 作 步 骤 清 晰 简明 ， 技 术 分 析 深 入 浅 出 ， 完 成 效果 精美 实用 。 这 些 实例 便于 读者 融会 贯通 地 理解 本 书 中 所 介绍 的 技术 ， 并 且 稍 加 


修改 即 可 用 于 实际 网 站 开发 。 


“НТМІ,5: 讲述 了 最 新 一 代 Web 标 准 HIML 5 的 使 用 。 
3 К 
本 书 配套 的 视频 文件 和 素材 文件 下 载 地 址 如 下 : 


http://pan.baidu.com/s/1nuCpY9j (注意 字母 大 小 写 和 数字 ) 


如 果 下 载 有 问题 ， 请 发 邮件 到 电子 邮箱 booksaga@126.com。 


本 书 适 合 读者 
本 书 主要 由 程 振安 、 谢 震 编写 ， 另 外 参与 写作 的 还 有 人 徐 洪峰 、 孙 雷 杰 、 乔 海 丽 、 冯 雷 雷 、 孙 和 鲁 杰 、 何 琛 、 吴 秀 红 、 孙 文 记 、 王 东 霞 、 邓 仰 伟 、 孙 起 云 、 倪 庆 军 、 何 香 连 、 吕 志 彬 。 由 于 作者 水 平 有 限 ， 


加 之 创作 时 间 仓促 ， 本 书 不 足 之 处 在 所 难免 ， 欢 迎 广大 读者 批评 指正 。 


本 书 既 可 作为 职业 学 校 、 电 脑 培训 班 的 教材 ， 又 可 作为 大 专 院 校 相关 专业 师 生 的 教学 参考 用 书 ， 更 是 广大 网 页 设计 、 网 页 制作 和 网 站 建设 爱好 者 的 自学 参考 用 书 。 


第 1 章 ”网 页 设计 与 网 站 制作 基础 


为 了 能 够 使 网 页 初学 者 对 网 页 制作 有 个 总 体 的 认识 ， 在 创建 网 页 前 ， 介 绍 网 页 制作 的 基础 知识 。 本 章 首 先 介绍 网 页 的 基本 知识 ， 接 着 介绍 网 页 的 基本 构成 元 素 ， 最 后 简单 介绍 网 页 制作 常用 工具 
Dreamweaver、Flash 和 Photoshop。 通 过 本 章 的 学 习 ， 可 以 为 后 面 制作 更 复杂 的 网 页 打下 良好 的 基础 。 


本 章 重点 


.常用 网 页 设计 软件 
.网 站 开发 常用 语言 
:网 站 的 类 型 与 特点 


- 网 站 制作 流程 概述 


1.1 天 于 网 页 设计 基础 


在 学 习 网 页 制作 之 前 ， 先 来 了 解 一 下 网 页 中 的 基本 概念 。 


- 


网 页 又 称 HTML 文 件 ， 是 一 种 可 以 在 WWW 上 传输 ， 能 被 浏览 器 认识 和 翻译 ， 并 用 页 面 形式 显示 出 来 的 文件 。 网 页 分 为 静态 网 页 和 动态 网 页 。 


静态 网 页 是 网 站 建设 初期 经 常 采 用 的 一 种 形式 。 网 站 建设 者 把 内 容 设计 成 静态 网 页 ， 访 问 者 只 能 被 动 地 浏览 网 站 建设 者 提供 的 网 页 内 容 。 如 图 1-1 所 示 为 静态 网 页 ， 用 于 展示 内 容 。 
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静态 网 页 特点 如 下 。 


HART 
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- 网 页 内 容 不 会 发 生变 化 ， 除 非 网 页 设计 者 修改 了 网 页 的 内 容 。 


° 不 能 和 用 户 进行 交互 。 信 息 流向 是 


单 向 的 ， 即 从 服务 器 到 浏览 器 。 服 务 器 不 能 根据 用 户 的 选择 调整 返回 更 新 的 内 容 。 


所 谓 动态 网 页 是 指 网 页 文件 里 包含 了 程序 代码 ， 通 过 后 台数 据 库 与 Web 服 务 器 的 信息 交互 ， 由 后 台数 据 库 提供 实时 数据 更 新 和 数据 查询 服务 。 这 种 网 页 的 后 缀 名 称 一 般 根 据 不 同 的 程序 设计 语言 而 


见 的 有 .asp、.jsp、.php、.perl、 


.cgi 等。 动态 网 页 能 够 根据 不 同时 间 和 不 同 访问 者 而 显示 不 同 内 容 。 如 常见 的 新 闻 发 布 系 统 、 聊 天 系统 和 购物 系统 通常 用 动态 网 页 实现 。 如 图 1-2 所 示 为 动态 网 页 。 


жаланы 为 了 进一步 下 雷公 司 的 各 硕 服 务 ， ШЕНІ КЕЛЕ ВВ 
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812 ”动态 网 页 
动态 网 页 制作 比较 复杂 ， 需 要 用 到 ASP、PHP、JSP 和 AsSsP.NET 等 专门 的 动态 网 页 设计 语言 。 
动态 网 页 的 一 般 特 点 如 下 。 
` 动态 网 页 以 数据 库 技术 为 基础 ， 可 以 大 大 降低 网 站 维护 的 工作 量 。 
- 采用 动态 网 页 技术 的 网 站 可 以 实现 更 多 的 功能 ， 如 用 户 注 册 、 用 户 登 录 、 搜 索 查询 、 用 户 管理 、 订 单 管理 等 。 


- 动态 网 页 并 不 是 独立 存在 于 服务 器 上 的 网 页 文件 ， 只 有 当 用 户 请 求 时 服务 器 才 返 回 一 个 完整 的 网 页 。 


1.1.2 ” Web 标准 的 概念 和 特点 


Web 标 准 是 由 W3C 和 其 他 标准 化 组 织 制定 的 一 套 规范 集合 ，Web 标 准 的 目的 在 于 创建 一 个 统一 的 用 于 Web 表 现 层 的 技术 标准 ， 以 便于 通过 不 同 浏览 器 或 终端 设备 向 最 终 用户 展 示 信 息 内 容 。 


Web 标 准 由 一 系列 规范 组 成 ， 目 前 的 Web 标 准 主要 由 3 大 部 分 组 成 : 结构 (Structure) 、 表 现 (Presentation) 、 行 为 (Behavior) 。 真 正 符合 Web 标 准 的 网 页 设计 是 指 能 够 灵活 使 用 Web 标 准 对 
Web 内 容 进 行 结 构 、 表 现 与 行为 的 分 离 。 


1. 结 构 (Structure) 

结构 用 于 对 网 页 中 用 到 的 信息 进行 分 类 与 整理 。 在 结构 中 用 到 的 技术 主要 包括 HTML、XML 和 XHTML。 
2. 表 现 (Presentation) 

表现 用 于 对 信息 进行 版 式 、 颜 色 、 大 小 等 形式 控制 。 在 表现 中 用 到 的 技术 主要 是 CSs 层 老 样 式 表 。 
3413 (Behavior) 


行为 是 指 文 档 内 部 的 模型 定义 及 交互 行为 的 编写 ， 用 于 编写 交互 式 的 文档 。 在 行为 中 用 到 的 技术 主要 包括 DOM 和 ECMAScript。 


- ПОМ (Document Object Model) 文档 对 象 模 型 


DOM 是 浏览 器 与 内 容 结构 之 间 沟 通 的 接口 ， 读 者 可 以 通过 它 访问 页 面 上 的 标准 组 件 。 
ECMAScript 脚 本 语言 


ECMAScript 是 标准 脚本 语言 ， 用 于 实现 具体 界面 上 对 象 的 交互 操作 。 


113 ”网 页 设计 师 应 该 具备 的 素养 

网 页 设计 是 一 门 新 兴 行 业 ， 在 网 络 产生 以 后 应 运 而 生 。 网 页 如 门面 ， 小 到 个 人 ， 大 到 公司 、 政 府 部 门 以 及 国际 组 织 等 在 网 络 上 无 不 以 网 页 作为 自己 的 门面 。 当 单 击 进入 网 站 时 ， 首 先 映 入 眼帘 的 是 该 网 
页 的 界面 设计 ， 如 内 容 的 介绍 、 按 钮 的 摆 放 、 文 字 的 组 合 、 色 彩 的 应 用 等 。 这 一 切 都 是 网 页 设计 的 范畴 ， 都 是 网 页 设计 师 的 工作 。 作 为 一 个 网 页 设计 师 应 该 具备 哪些 素养 呢 ? 

(1) 作为 一 名 网 页 设计 师 ， 首 先 要 具备 较 强 的 审美 能 力 和 美术 功底 。 

如 果 没 有 ， 那 么 一 定 想 办 法 加 强 这 两 个 方面 的 能 力 。 如 果 确 实 没 办 法 提高 这 两 方面 的 能 力 ， 那 就 很 难 成 为 一 名 优秀 网 页 设计 师 。 

(2) 优秀 网 页 设计 师 应 该 是 合理 地 利用 技术 ， 在 尽量 不 影响 美观 的 条 件 下 ， 找 到 一 个 结合 点 做 出 美观 而 又 实用 的 网 页 。 


(3) 作为 一 名 优秀 设计 师 应 该 时 时 关注 软件 新 的 发 展 ， 适 应 新 的 功能 ， 以 提高 工作 的 效率 ， 很 多 设计 师 只 重视 网 页 制作 软件 的 使 用 ， 而 忽视 一 些 内 部 技术 方面 的 知识 。 这 也 是 不 行 的 ， 例 如 ， 如 果 不 掌 
握 AsP 技 术 ， 网 页 设计 师 的 知识 就 是 不 完善 的 ， 就 不 能 做 一 些 动态 系统 ， 此 外 ， 还 要 掌握 HTML、Javascript 和 Css 等 技术 。 


(4) 作为 合格 的 网 页 设计 师 ， 一 定 的 文化 素质 是 不 可 少 的 。 好 的 文案 ， 不 仅仅 让 人 对 你 所 做 的 网 页 回味 无 穷 ， 也 可 使 自己 的 网 页 平添 几 分 艺术 特色 。 文 化 素质 不 仪 仪 包括 文学 修养 ， 还 有 音乐 和 绘画 等 
方面 的 修养 。 只 有 具备 一 定 的 这 些 方面 的 修养 ， 才 能 够 使 自己 网 页 达到 一 定 的 水 准 ， 才 能 够 让 浏览 者 欣赏 到 好 的 网 页 制作 。 


(5) 作为 一 名 从 事 网 页 设计 的 人 来 说 ， 经 常 上 网 去 看 别人 怎么 做 的 ， 吸 收 一 些 好 的 经 验 ， 杜 绝 一 些 常 犯 的 毛病 。 了 解 到 网 页 风格 的 发 展 ， 跟 上 时 代 潮 流 。 


如 果 你 对 网 页 设计 已 经 有 了 一 定 的 基础 ， 对 HTML 语 言 双 有 一 定 的 了 解 ， 那 么 可 以 选择 下 面 的 几 种 软件 来 设计 网 页 ， 它 们 一 定 会 为 你 的 网 页 添 色 不 少 。 


1.2.1 网 页 编辑 排版 软件 Dreamweaver СС 
近年 来 ， 随 着 网 络 信息 技术 的 广泛 应 用 ， 互 联网 正 逐 步 改 变 着 人 们 的 生活 和 工作 方式 。 越 来 越 多 的 个 人 、 企 业 纷纷 建立 自己 的 网 站 ， 利 用 网 站 来 宣传 和 推广 自己 。 这 样 ， 就 出 现 了 很 多 的 网 页 制作 软 


件 ， 如 Adobe 公 司 的 Dreamweaver 无 疑 是 其 中 使 用 最 为 广泛 的 一 个 ， 它 以 强大 的 功能 和 友好 的 操作 界面 受到 了 广大 网 页 设计 者 的 欢迎 ， 成 为 设计 者 制作 网 页 的 首选 软件 。 特 别 是 最 新 版 本 的 Dreamweaver 
CC 软件 新 增 了 许多 功能 ， 可 以 帮助 用 户 在 更 短 的 时 间 内 完成 更 多 的 工作 。 如 图 1-3 所 示 为 网 页 制作 软件 Dreamweaver CC 的 操作 界面 。 


1.2.2 ”网 页 动画 制作 软件 Flash СС 


Flash 是 一 款 非常 流行 的 平面 动画 制作 软件 ， 被 广泛 应 用 于 网 站 制作 、 游 戏 制 作 、 影 视 广告 、 电 子 贺 卡 、 电 子 杂志 、MV 制 作 等 领域 。 它 的 优点 是 体积 小 ， 可 边 下 载 边 播放 ， 这 样 就 避免 了 用 户 长 时 间 的 
等 待 。 用 户 可 以 用 其 生成 动画 ， 还 可 在 网 页 中 加 入 声音 ， 就 能 生成 多 媒体 的 图 形 和 界面 。Flash CC Professional 是 目前 Flash 的 新 版 本 ， 如 图 1-4 所 示 为 网 页 动画 制作 软件 Flash CC 的 操作 界面 。 
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614 网 页 动画 制作 软件 Flash СС 


Photoshop 是 被 业界 公认 的 图 形 图 像 处 理 专家 ， 也 是 全 球 性 的 专业 图 像 编 辑 行业 标准 。Photoshop CC 是 Adobe 公 司 的 图 像 编辑 软件 ， 它 提供 了 高 效 的 图 像 编辑 和 处 理 功 能 、 人 性 化 的 操作 界面 ， 深 


тт 


2 


ЗЕ 
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美术 设计 人 员 的 青睐 。Photoshop CC 和 集 图 像 设 计 、 合 成 以 及 高 品质 输出 等 功能 于 一 身 ， 广 泛 应 用 于 平面 设计 和 网 页 美工 、 数 码 照片 后 期 处 理 、 建 筑 效果 后 期 处 理 等 诸多 领域 。 该 软件 在 网 页 前 期 设计 中 ， 
无 论 是 色彩 的 应 用 、 版 面 的 设计 、 文 字 特 效 、 按 钮 的 制作 以 及 网 页 动画 ， 均 占有 重要 地 位 。 如 图 1-5 所 示 为 网 页 图 像 设 计 软 件 Photoshop CC 的 操作 界面 。 
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415 网 页 图 像 设 计 软 件 Photoshop СС 
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仅仅 学 会 了 网 页 制作 工具 ， 是 不 能 制作 出 动态 网 站 的 ， 还 需要 了 解 网 站 开发 语言 ， 如 网 页 标记 语言 HTML、 网 页 脚本 语言 Javascript 和 VBscript、 动 态 网 页 编程 语言 ASP 等 。 


131 ”网 页 标记 语言 HTML 


网 页 文档 主要 是 由 HTML 构 成 。HTML 全 名 是 Hyper Text Markup Language， 即 超 文 本 标记 语言 ， 是 用 来 描述 WWW 上 超 文本 文件 的 语言 ， 用 它 编写 的 文件 扩展 名 是 .html 或 .htm。 


HTML 不 是 一 种 编程 语言 ， 而 是 一 种 页 面 描述 性 标记 语言 。 它 通过 各 种 标记 描述 不 同 的 内 容 ， 说 明 段 落 、 标 题 、 图 像 、 字 体 等 在 浏览 器 中 的 显示 效果 。 浏 览 器 打开 HTML 文 件 时 ， 将 依据 HTML 标 记 去 显 
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HTML 能 够 将 Internet 上 不 同 服务 器 上 的 文件 连接 起 来 ， 可 以 将 文字 、 声 音 、 图 像 、 动 画 、 视 频 等 媒体 有 机 组 织 起 来 ， 展 现 给 用 户 五 彩 缤纷 的 画面 。 此 外 ， 它 还 可 以 接受 用 户 信息 ， 与 数据 库 相 连 ， 实 现 
用 户 的 查询 请 求 等 交互 功能 。 


HTML 的 任何 标记 都 由 “<” 和 “>” 围 起 来 ， 如 <html>、<i>。 在 起 始 标 记 的 标记 名 前 加 上 符号 “/” 便 是 其 终止 标记 ， 如 </i>， 夹 在 起 始 标记 和 终止 标记 之 间 的 内 容 受 标记 的 控制 ， 例 如 <i> 幸 福永 
远 </i> ， 夹 在 标记 i 之 间 的 “幸福 永远 ”将 受 标记 i 的 控制 。 

下 面 讲述 HTML 的 基本 结构 。 

HTML 标 记 

<html> 标 记 用 于 HTML 文 档 的 最 前 边 ， 用 来 标识 HTML 文 档 的 开始 。 而 </html> 标 记 恰 恰 相 反 ， 它 放 在 HTML 文 档 的 最 后 边 ， 用 来 标识 HTML 文 档 的 结束 ， 两 个 标记 必须 一 起 使 用 。 

Head 标 记 


<head> 和 </head> 构 成 HTML 文 档 的 开头 部 分 ， 在 此 标记 对 之 间 可 以 使 用 <title> </title>, <script> </script> 等 标记 对 ， 这 些 标记 对 都 是 描述 HTML 文 档 相 关 信 息 的 标记 对 ，<head> </head> 标 记 
对 之 间 的 内 容 不 会 在 浏览 器 的 框 内 显示 出 来 ， 两 个 标记 必须 一 起 使 用 。 


Body 标 记 


<body> </body> 是 HTML 文 档 的 主体 部 分 ， 在 此 标记 对 之 间 可 包含 <p> </p>、<h1> </h1>、<br> </br> 等 众多 的 标记 ， 它 们 所 定义 的 文本 、 图 像 等 将 会 在 浏览 器 内 显示 出 来 ， 两 个 标记 必须 一 起 
使 用 。 


Title 标 记 


使 用 过 浏览 器 的 人 可 能 都 会 注意 到 浏览 器 窗口 最 上 边 蓝 色 部 分 显示 的 文本 信息 ， 而 这 些 信息 一 般 是 网 页 的 “标题 ”， 要 将 网 页 的 标题 显示 到 浏览 器 的 顶部 其 实 很 简单 ， 只 要 在 <title> </title> 标 记 对 之 
间 加 入 要 显示 的 文本 即 可 。 


1.3.2 ”网 页 样式 表 CSS 


CSS 是 英语 Cascading Style Sheets (Ея) 的 缩写 ， 它 可 以 与 HTML 或 XHTML 超 文 本 标记 语言 配合 来 定义 网 页 的 外 观 。 


在 网 页 设计 中 通常 需要 统一 网 页 的 整体 风格 ， 统 一 的 风格 大 部 分 涉及 网 页 中 文字 属性 、 网 页 背景 色 以 及 链接 文字 属性 等 ， 如 果 我 们 应 用 CSs 来 控制 这 些 属 性 ， 会 大 大 提高 网 页 设计 速度 ， 更 加 统一 网 页 
总 体 效 果 。 例 如 图 1-6 和 图 1-7 所 示 的 网 页 分 别 为 使 用 Css 前 后 的 效果 。 
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图 1-6 使 用 CSS 前 
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图 1-7 使 用 CSS 后 
当 熟 练 掌握 了 Dreamweaver 的 基本 功能 后 ， 可 能 会 发 现 制作 的 网 页 有 些 问 题 ， 例 如 文字 不 能 添加 在 图 片上 ， 段 落 之 间 不 能 设置 行距 。 有 时 即使 伐 得 一 些 HTML 标 记 ， 但 是 还 不 能 随意 改变 网 页 元 素 的 外 


观 ， 无 法 随心 所 欲 地 编排 了 网页。 因此 W3C 协 会 颁布 了 一 套 CSS 语 法 ， 用 来 扩展 HTML 语 法 的 功能 。CSS 是 网 页 设计 的 一 个 突破 ， 它 解决 了 网 页 界面 排版 的 难题 。 可 以 这 么 说 ，HTML 的 标记 主要 是 定义 网 页 的 
内 容 ， 而 CSS 决 定 这 些 网 页 内 容 如 何 显示 。 


1.3.3 ”网 页 脚本 语言 JavaScript 


使 用 Javascript 等 简单 易 懂 的 脚本 语言 ， 结 合 HTML 代 码 可 快速 地 完成 网 站 的 应 用 程序 。 脚 本 语言 (JavaScript，VBScript 等 ) 介 于 HTML 和 C、C++、Java、C# 等 编程 语言 之 间 。 脚 本 是 使 用 一 种 特定 
的 描述 性 语言 ， 依 据 一 定 的 格式 编写 的 可 执行 文件 ， 又 称 作 宏 或 批 处 理 文 件 。 脚 本 通常 可 以 由 应 用 程序 临时 调用 并 执行 。 各 类 脚本 目前 被 广泛 地 应 用 于 网 页 设计 中 ， 因 为 脚本 不 仅 可 以 减 小 网 页 的 规模 和 提 
高 网 页 浏览 速度 ， 而 且 可 以 丰富 网 页 的 表现 ， 如 动画 、 声 音 


脚本 同 VB、C 语 言 的 区 别 主要 如 下 。 

脚本 语法 比较 简单 ， 容 易 掌握 。 

. 脚本 与 应 用 程序 密切 相关 ， 所 以 包括 相对 应 用 程序 自身 的 功能 。 
脚本 一 般 不 具备 通用 性 ， 所 能 处 理 的 问题 范围 有 限 。 

` 脚本 多 为 解释 执行 。 

下 面 通过 一 个 简单 的 实例 来 熟悉 JavaScript 的 基本 使 用 方法 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>JavaScript</title> 
</head> 

<body> 

<script language="javascript"> 
document.write ("<font size=10 color=#fchfdm>JavaScript 的 基本 使 用 方法 !</font>"); 
</script> 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 代码 ， 就 是 Javascript 脚 本 的 具体 应 用 ， 如 图 1-8 所 示 。 
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图 1-8 JavaSctipt 脚 本 


以 上 代码 是 简单 的 JavaScript 脚 本 ， 它 分 为 3 部 分 ， 第 一 部 分 是 script language="JavaScript"， 它 告诉 浏览 器 “下 面 的 是 JavaScript 脚 本 ”。 开 头 使 用 <script> 标 记 ， 表 示 这 是 一 个 脚本 的 开始 ， 在 
<script> 标 记 里 使 用 language 指 明 使 用 哪 一 种 脚本 ， 因 为 并 不 只 存在 JavaScript 一 种 脚本 ， 还 有 VBScript 等 脚本 ， 所 以 这 里 就 要 用 language 属 性 指明 使 用 的 是 JavaScript 脚 本 。 第 二 部 分 就 是 JavaScript 脚 
本 ， 用 于 创建 对 象 ， 定 义 函 数 或 是 直接 执行 某 一 功能 。 第 三 部 分 是 </script> ， 它 用 来 告诉 浏览 器 Javascript 脚 本 到 此 结束 。 


134 动态 网 页 编程 语言 ASP 


AsP 是 Active Server Page 的 缩写 ， 意 为 “活动 服务 器 网 页 ”。AsSP 是 微软 公司 开发 的 代替 CGI 脚本 程序 的 一 种 应 用 ， 它 可 以 与 数据 库 和 其 他 程序 进行 交互 ， 是 一 种 简单 、 方 便 的 编程 工具 。AsP 的 网 页 
文件 的 格式 是 .asp， 常 用 于 各 种 动态 网 站 中 。AsP 是 一 种 服务 器 端 脚本 编写 环境 ， 可 以 用 来 创建 和 运行 动态 网 页 或 Web 应 用 程序 。AsSP 网 页 可 以 包含 HTML 标 记 、 普 通 文 本 、 脚 本 命令 以 及 COM 组 件 等 。 利 
用 ASP 可 以 向 网 页 中 添加 交互 式 内 容 ， 也 可 以 创建 使 用 HTML 网 页 作为 用 户 界面 的 Web 应 用 程序 。 如 图 1-9 所 示 为 动态 ASP 网 页 的 工作 原理 。 
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919 动态 网 页 的 工作 原理 图 
与 HTML 相 比 ，ASP 网 页 具有 以 下 特点 。 
(1) 利用 ASP 可 以 突破 静态 网 页 的 一 些 功 能 限制 ， 实 现 动态 网 页 技术 。 
(2) AsP 文 件 是 包含 在 HTML 代 码 所 组 成 的 文件 中 的 ， 易 于 修改 和 测试 。 
(3) 服务 器 上 的 AsP 解 释 程 序 会 在 服务 器 端 制定 ASP 程 序 ， 并 将 结果 以 HTML 格 式 传 送 到 客户 端 浏览 器 上 ， 因 此 使 用 各 种 浏览 器 都 可 以 正常 浏览 ASP 所 产生 的 网 页 。 


(4) ASP 提 供 了 一 些 内 置 对 象 ， 使 用 这 些 对 象 可 以 使 服务 器 端 脚本 功能 更 强 。 例 如 可 以 从 Web 浏 览 器 中 获取 用 户 通过 HTML 表 单 提交 的 信息 ， 并 在 脚本 中 对 这 些 信息 进行 处 理 ， 然 后 向 Web 浏 览 器 发 送 
кв, 


(5) AsP 可 以 使 用 服务 器 端 ActiveX 组 件 来 执行 各 种 各 样 的 任务 ， 例 如 访问 数据 库 、 收 发 E-mail 或 访问 文件 系统 等 。 


(6) 由 于 服务 器 是 将 ASP 程 序 执行 的 结果 以 HTML 格 式 传 回 客户 端 浏 览 器 ， 因 此 用 户 不 会 看 到 ASP 所 编写 的 原始 程序 代码 ， 可 防止 ASP 程 序 代 码 被 窃取 。 


14 ”网 站 的 类 型 与 特点 


网 站 是 多 个 网 页 的 集合 ， 目 前 没有 一 个 严谨 的 网 站 分 类 方式 ， 只 是 将 网 站 按照 主体 性 质 不 同 分 为 门户 网 站 、 电 子 商务 网 站 、 娱 乐 网 站 、 游 戏 网 站 、 时 尚 网 站 、 个 人 网 站 等 。 


1.4.1 资讯 类 网 站 


随 着 网 络 的 发 展 ， 作 为 一 个 全 新 的 媒体 ， 新 闻 资 讯 网 站 受到 越 来 越 多 的 关注 。 它 具有 传播 速度 快 、 传 播 范 围 广 、 不 受 时 间 和 空间 限制 等 特点 ， 因 此 新 闻 网 站 得 到 了 飞速 的 发 展 。 新 闻 资讯 网 站 以 其 新 闻 
传播 领域 的 丰富 网 络 资源 ， 逐 渐 成 为 继 传统 媒体 之 后 的 第 四 新 闻 媒 体 ， 如 图 1-10 所 示 。 
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81-10 ”新闻 资讯 类 网 站 


1.4.2 ”电子 商务 类 网 站 
电子 商务 网 站 为 浏览 者 搭建 起 一 个 网 络 平台 ， 浏 览 者 和 潜在 客户 在 这 个 平台 上 可 以 进行 整个 交易 /交流 过 程 ， 电 子 商务 型 网 站 业务 更 依赖 于 互联 网 ， 是 公开 的 信息 仓库 。 


所 谓 电子 商务 是 指 利 用 当代 计算 机 、 网 络 通 信 等 技术 实现 各 种 商务 活动 的 信息 化 、 数 字 化 、 无 纸 化 和 国际 化 。 狭 义 上 说 ， 电 子 商 务 就 是 电子 贸易 ， 主 要 指 利用 在 网 上 进行 电子 交易 ， 买 卖 
务 ， 如 图 1-11 所 示 为 当当 购物 网 站 。 广 义 上 说 ， 电 子 商 务 还 包括 企业 内 部 的 商务 活动 ， 如 生产 、 管 理 、 财 务 以 及 企业 间 的 商务 活动 等 。 
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143 ”互动 游戏 类 网 站 


пы век мио 王者 


卖 产 品 和 提供 服 


随 着 互联 网 的 飞速 发 展 ， 不 仅 涌 现 出 了 很 多 个 人 网 站 和 商业 网 站 ， 也 产生 了 很 多 的 娱乐 休闲 类 网 站 ， 如 电影 网 站 、 音 乐 网 站 、 游 戏 网 站 、 交 友 网 站 、 社 区 论坛 、 手 机 短信 网 站 等 。 这 些 网 站 为 广大 网 民 
提供 了 娱乐 休闲 的 场所 。 

网 络 游戏 是 当今 网 络 中 热门 的 一 个 行业 ,许多 门户 网 站 也 专门 增加 了 游戏 频道 。 网 络 游戏 的 网 站 与 传统 游戏 的 网 站 设计 略 有 不 同 ， 一 般 情况 下 是 以 矢量 风格 的 卡通 插图 为 主体 的 ， 色 彩 对 比 鲜明 。 渐 变 
的 背景 色彩 使 页 面 看 起 来 十 分 明亮 ， 少 许 立 体感 的 游戏 风格 使 页 面 看 起 来 十 分 可 爱 ， 带 有 西方 童话 色彩 的 框架 设计 使 网 站 看 起 来 十 分 特别 ， 如 图 1-12 所 示 。 
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61-12 ”游戏 网 站 


144 机 构 类 网 站 


所 谓 机 构 类 网 站 通常 指 政府 机 关 、 非 曹 利 性 机 构 或 相关 社团 组 织 建 立 的 网 站 ， 网 站 的 内 容 多 以 机 构 或 社团 的 形象 宣传 和 政府 服务 为 主 ， 网 站 的 设计 通常 风格 一 致 、 功 能 明确 ， 受 众 面 也 较为 明确 ， 内 容 
上 相对 较为 专 一 。 如 图 1-13 所 示 为 机 构 类 网 站 。 
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1.4.5 ”时尚 类 网 站 
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1.4.6 “门户 类 网 站 


门户 类 网 站 是 互联 网 的 巨人 ， 它 们 拥有 庞大 的 信息 量 和 用 户 资源 。 
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是 充满 活力 的 年 轻 人 秉持 的 生活 态度 。 时 尚 则 是 各 种 流行 文化 和 设计 理念 的 交汇 与 碰撞 。 如 图 1-14 所 示 的 某 时 尚 网 ， 体 现 着 时 尚 、 潮 流 ， 融 合 最 
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61-13 ”机 构 类 网 站 


沿 的 文化 信息 。 


TERTE nurin 


图 1-14 ”时 尚 网 


类 ， 为 上 网 访问 者 打开 方便 之 门 ， 绝 大 多 数 网 民 通 过 门户 网 站 来 寻找 感 兴趣 的 信息 资源 的 ， 巨 大 的 访问 


门户 网 站 将 无 数 信息 整合 、 分 类 


量 给 这 类 网 站 带 来 了 无 限 的 商机 ， 如 图 1-15 所 示 。 
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1-15 “门户 网 站 


15 ”网 站 制作 流程 概述 


创建 网 站 是 一 个 系统 工程 ， 有 一 定 的 工作 流程 ， 按 部 就 班 才能 设计 出 满意 的 网 站 。 因 此 在 制作 网 站 前 ， 先 要 了 解 网 站 制作 的 基本 流程 ， 这 样 才能 制作 出 更 好 、 更 合理 的 网 站 。 


1.5.1 了 解 客户 的 需 S 


网 站 的 设计 是 展现 企业 形象 、 介 绍 产 品 和 服务 、 体 现 企 业 发 展 战略 的 重要 途径 ， 因 此 必须 明确 设计 网 站 的 目的 和 用 户 需 求 ， 从 而 做 出 切实 可 行 的 设计 计划 。 要 根据 消费 者 的 需求 、 市 场 的 状况 、 企 业 自 
身 的 情况 等 进行 综合 分 析 ， 牢 记 以 “消费 者 ”为 中 心 ， 而 不 是 以 “美术 ”为 中 心 进行 设计 规划 。 在 设计 规划 之 初 要 考虑 以 下 内 容 : 建设 网 站 的 目的 是 什么 ? 为 谁 提 供 产 品 和 服务 ? 企业 能 提供 什么 样 的 产品 
和 服务 ? 企业 产品 和 服务 适合 什么 样 的 表现 方式 ? 


1.5.2 ”制作 项 目 规划 文案 
与 客户 沟通 并 了 解 网 站 项 目的 需求 后 ， 便 可 着 手 制作 项 目 规划 文案 ， 将 项 目 制作 规范 化 。 项 目 规划 文案 包括 项 目 可 实施 性 报告 、 网 站 建设 定位 及 目标 、 网 站 内 容 总 策划 书 、 技 术 解决 方案 、 网 站 推广 方 
案 以 及 网 站 运营 规划 书 等 内 容 的 文档 . 


` 项 目 可 实施 性 报告 : 包括 对 相关 行业 的 市 场 分 析 、 竞 争 对 手 的 网 站 分 析 和 自身 条 件 分 析 。 通 过 市 场 分 析 可 以 找到 合适 的 市 场 切入 点 ， 而 通过 对 手 网 站 和 自身 条 件 分 析 ， 可 以 借鉴 对 手 的 优点 并 找 出 对 
手 的 劣势 ， 再 结合 自身 条 件 制定 出 可 行 的 网 站 设计 方案 。 


` 网 站 建设 定位 及 目标 : 定位 网 站 的 功能 和 作用 ， 以 及 网 站 面向 的 用 户 群体 。 网 站 建设 目标 则 包括 建设 初期 的 目标 、 中 期 目标 以 及 长 远 目标 等 。 


“ 网 站 内 容 总 策划 书 : 包括 网 站 内 容 规 划 、 网 站 设计 与 功能 规范 ， 以 及 网 站 建设 日 程 表 。 网 站 内 容 规 划 又 包括 网 站 名 称 、 网 站 域名 、 网 站 概述 、 首 页 要 求 、 网 站 效果 和 后 台 的 具体 内 容 ， 以 及 网 站 的 参 
考 资料 ; 而 网 站 设计 与 测试 规范 则 是 网 站 设计 师 、 美 术 编 辑 人 员 以 及 测试 人 员 的 工作 规范 ， 包 括 质量 要 求 以 及 设计 时 的 注意 事项 ; 网 站 建设 日 程 表 则 详细 地 规定 了 网 站 建设 的 每 一 个 步骤 所 耗费 的 时 间 。 


` 技术 解决 方案 : 包括 建设 和 维护 网 站 时 的 网 络 要 求 、 硬 件 要 求 、 软 件 要 求 以 及 网 站 程序 开发 的 技术 支持 。 网 络 要 求 主要 指 连接 网 站 的 网 络 带宽 以 及 网 络 稳定 性 ; 硬件 要 求 主要 指 网 站 服务 器 的 硬件 要 
求 ， 包 括 数据 处 理 能 力 、 数 据 容量 以 及 稳定 性 等 ; 软件 要 求 主 要 指 服务 器 使 用 的 操作 系统 以 及 服务 器 软件 等 ; 而 网 站 程序 开发 的 技术 支持 则 指 开发 网 站 时 使 用 的 脚本 技术 、 数 据 库 技 术 等 。 


` 网 站 推广 方案 : 包括 网 站 初步 推广 计划 以 及 网 站 深度 推广 计划 。 例 如 ， 可 以 在 搜索 引擎 注册 网 站 ， 申 请 友情 链接 ， 到 各 大 论坛 发 布 广告 ， 以 及 在 此 基础 上 印 制 宣传 品 ， 如 名 片 、 文 化 衫 、 海 报 等 。 


` 网 站 运营 规划 书 : 可 规定 网 站 的 建设 和 维护 团队 ， 团 队 成 员 的 权力 和 责任 ， 以 及 网 站 的 运营 方式 。 


1.5.3 ”规划 网 站 内 容 


一 个 成 功 的 网 站 一 定 要 注重 外 观 布 局 。 外 观 是 给 用 户 的 第 一 印象 ， 给 浏览 者 留 下 一 个 好 的 印象 ， 那 么 他 看 下 去 或 再 次 光顾 的 可 能 性 才 更 大 。 但 是 一 个 网 站 要 想 留 住 更 多 的 用 户 ， 最 重要 的 还 是 网 站 的 内 


容 。 网 站 内 容 是 一 个 网 站 的 灵魂 ， 内 容 做 得 好 ， 做 到 有 自己 的 特色 才 会 脱 疾 而 出 。 网 站 内 容 ， 一 定 要 做 出 自己 的 特点 来 。 当 然 有 一 点 需要 注意 的 是 ， 不 要 为 了 差异 化 而 差异 化 ， 只 有 满足 用 户 核心 需求 的 差 
异化 才 是 有 效 的 ， 否 则 跟 模 仿 其 他 网 站 功能 没有 实质 的 区 别 。 


网 站 的 内 容 是 浏览 者 停留 时 间 的 决定 要 素 ， 内 容 空 泛 的 网 站 ， 访 客 会 匆匆 离 去 。 只 有 内 容 充实 丰富 的 网 站 ， 才 能 吸引 访客 细 细 阅读 ， 深 入 了 解 网 站 的 产品 和 服务 ， 进 而 产生 合作 的 意向 。 


在 确定 好 网 站 的 风格 和 搜集 完 资料 后 就 需要 设计 网 页 图 像 了 ， 网 页 图 像 设 计 包 括 Logo、 标 准 色彩 、 导 航 条 和 首页 布局 等 。 可 以 使 用 Photoshop 或 Fireworks 软 件 来 具体 设计 网 站 的 图 像 。 有 经 验 的 网 页 


设计 者 ， 通 常会 在 进行 网 页 制作 之 前 ， 设 计 好 网 页 的 整体 布局 ， 这 样 在 具体 设计 过 程 将 会 胸有成竹 ， 大 大 节省 工作 时 间 。 如 图 1-16 所 示 为 设计 好 的 网 页 图 像 。 
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61-6 设计 好 的 网 页 图 像 


ТРИ FPX 
网 页 设计 是 一 个 复杂 而 细致 的 过 程 ， 一 定 要 按照 先 大 后 小 、 先 简单 后 复杂 的 顺序 制作 。 所 谓 先 大 后 小 ， 就 是 说 在 制作 网 页 时 ， 先 把 大 的 结构 设计 好 ， 然 后 逐步 完善 小 的 结构 设计 。 所 谓 先 简 单 后 复杂 ， 
就 是 先 设计 出 简单 的 内 容 ， 然 后 设计 复杂 的 内 容 ， 以 便 出 现 问题 时 好 修改 。 
根据 站 点 目标 和 用 户 对 象 去 设计 网 页 的 版 式 以 及 网 页 内 容 的 安排 。 一 般 来 说 ， 至 少 应 该 对 一 些 主要 的 页 面 设 计 好 布局 ， 以 确定 网 页 的 风格 。 
这 样 可 以 大 大 提高 制作 效率 。 如 果 很 多 网 页 都 使 用 相同 的 版 面 设 计 ， 就 应 为 这 个 版 面 设计 一 个 模板 ， 然 后 就 可 以 以 此 模板 为 基础 创建 网 页 。 以 后 如 果 想 要 改变 所 有 


在 制作 网 页 时 要 灵活 运用 模板 和 库 ， 
网 页 的 版 面 设计 ， 只 需 简单 改变 模板 即 可 。 如 图 1-17 所 示 为 使 用 模板 制作 的 网 页 。 
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1-17 制作 的 网 页 模板 


1.5.6 ”开发 动态 网 站 模块 
页 面 制 作 完 成 后 ， 如 果 还 需要 动态 功能 的 话 ， 就 需要 开发 动态 功能 模块 ， 网 站 中 常用 的 功能 模块 包括 搜索 功能 、 留 言 板 、 新 闻 发 布 、 在 线 购物 、 论 坛 及 聊天 室 等 。 如 图 1-18 所 示 为 开发 的 动态 购物 网 站 


模块 。 


р ЯЯ Go П) 407 БА 


nF O ЖШ ра, „жщ, m. V 
тш и, =" Ыг sar" ", 


ща 1 Р 
ыы 
в годе. ИИ 
“ = 
= 
F1F= 


TBS | | [所 有 分 类 „|[#® AAEM жан Жыт Жб 


че‏ کے 


- АРЕ ЧЕ ЫНЫ 
хра панна | hu as Sosa 


Lu I.E 


MEAS i | с 
КВ ¥ 21 ұсза z = 
了 下 系列 产品 
ШЕЯ ШЕШІМ | 
ЕН 
其 独 产品 


„ШЕ: Е 25: ШЕ СЕ СА TR == АЕ ЕВ К-00З1 


YE ҮТ ҰТ ҰБ У 12 Ү 11 


页 上 一 页 下 一 页 尾 页 Tm: iom 共有 160 种 商品 Ре? [m ой 


8118 开发 的 动态 购物 网 站 模块 


1.5.7 ”申请 域名 和 服务 器 空间 


域名 是 企业 或 事业 单位 在 Internet 上 进行 相互 联络 的 网 络 地 址 。 在 网 络 时 代 ， 域 名 是 企业 和 事业 单位 进入 Internet 必 不 可 少 的 身份 证 明 。 


国际 域名 资源 是 十 分 有 限 的 ， 为 了 满足 更 多 企业 、 事 业 单位 的 申请 要 求 ， 各 个 国家 、 地 区 在 域名 最 后 加 上 了 国家 标记 段 ， 由 此 形成 了 各 个 国家 、 地 区 的 域名 ， 如 中 国 是 cn、 日 本 是 jp 等 ， 这 样 就 扩大 了 
域名 的 数量 ， 满 足 了 用 户 的 要 求 。 


注册 域名 前 应 该 在 域名 查询 系统 中 查询 所 希望 注册 的 域名 是 否 已 经 被 注册 。 几 乎 每 一 个 域名 注册 服务 商 在 自己 的 网 站 上 都 提供 查询 服务 。 如 图 1-19 所 示 为 在 阿里 云 申请 注册 域名 。 
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91-19 在 阿里 云 申 请 注册 域名 


网 站 是 建立 在 网 络 服务 器 上 的 一 组 电脑 文件 ， 它 需要 占据 一 定 的 硬盘 空间 ， 这 就 是 一 个 网 站 所 需 的 空间 。 


1.5.8 ”网 站 的 推广 


互联 网 的 应 用 和 繁荣 提供 了 广阔 的 电子 商务 市 场 和 商机 ， 但 是 互联 网 上 大 大 小 小 的 各 种 网 站 数 以 百 万 计 ， 如 何 让 更 多 的 人 都 能 迅速 地 访问 到 你 的 网 站 是 一 个 十 分 重要 的 问题 。 企 业 网 站 建 好 以 后 ， 如 果 
不 进行 推广 ， 那 么 企业 的 产品 与 服务 在 网 上 就 仍然 不 为 人 所 知 ， 起 不 到 建立 站 点 的 作用 ， 所 以 企业 在 建立 网 站 后 即 应 着 手 利用 各 种 手段 推广 自己 的 网 站 。 网 站 的 宣传 有 很 多 种 方式 ， 关 于 网 站 推广 的 主要 方 


法 将 在 后 面 的 章节 中 详细 讲述 。 


第 2 章 Dreamweaver CC 创建 基本 文本 网 页 


从 本 章 开 始 ， 我 们 将 正式 接触 到 网 页 制作 部 分 ， 学 习 的 内 容 主 要 包括 网 页 的 创建 、 页 面 属性 的 设置 、 文 本 的 输入 和 编辑 以 及 各 种 超级 链接 的 创建 。 本 章 所 学 的 知识 在 一 个 网 站 中 具有 很 重要 的 地 位 。 


本 章 重 点 
.了解 Dteamweavet CC 的 操作 界面 
· 在 Dreamweaver 中 搭建 站 点 
. 添加 文本 元 素 
` 编辑 文本 格式 
` 链接 的 设置 


` 创建 基本 文本 网 页 


21 _ 了解 Dreamweaver CC 的 操作 界面 


为 了 更 好 地 使 用 Dreamweaver CC， 应 了 解 其 操作 界面 的 基本 元 素 。Dreamweaver CC 的 操作 界面 是 由 菜单 栏 、 插 入 栏 、 文 档 窗口 、“ 属 性 ”面板 以 及 浮动 面板 组 成 ， 整 体 布局 显得 紧凑 、 合 理 。 如 图 


2-1 所 示 为 Dreamweaver CC 的 操作 界面 。 
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# 2-1 Dreamweaver CC 操作 界面 


1.358842 


菜单 栏 包括 “文件 ”“ 编 辑 ”“ 碍 看 ”“ 插 入 ” "EK" "EIA" “命令 ” "ща" “窗口 ”和 “帮助 ”10 个 菜单 项 ， 如 图 2-2 所 示 。 


DW тыр S8) 查看 (V) ЖАП ЕРІМ) Ж О) 0С) ”站 点 (S$) ”窗口 (W) ЖЕЛІН) 


图 2-2 же 
2. 插 入 栏 
插入 栏 包含 用 于 创建 和 插入 对 象 的 按钮 。 当 鼠标 指针 移 到 一 个 按钮 上 时 ,会 出 现 一 个 工具 提示 ， 其 中 含有 该 按钮 的 名 称 ， 单 击 按钮 即 可 插入 相应 的 元 素 ， 如 图 2-3 所 示 为 “常用 ”插入 栏 。 
3. 文 档 窗 口 


在 文档 窗口 中 ， 可 以 通过 “代码 ”视图 、“ 拆 分 ”视图 、“ 设 计 ” 视 图 、“ 实 时 视图 ”查看 文档 ， 如 图 2-4 所 示 文档 窗口 。 
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624 文档 窗口 


“属性 ”面板 显示 了 文档 窗口 中 选中 的 元 素 的 属性 ， 并 人 允许 用 户 在 “属性 ”面板 中 对 元 素 属性 直接 进行 修改 ， 选 中 的 元 素 不 同 ，“ 属 性 ”面板 中 的 内 容 就 不 同 。 在 “属性 ”面板 右上 角 有 一 个 倒 三 角形 
标记 ， 单 击 该 标记 ， 可 以 展开 “属性 ”面板 ， 显 示 更 多 的 属性 设置 内 容 。 当 展开 “属性 ”面板 时 ， 右 下 角 的 倒 三 角 标 记 变 为 正三 角 标 记 ， 单 击 该 标记 ， 又 可 以 重新 折 灵 属性 面板 ， 恢 复原 先 的 样式 ， 如 图 2-5 
所 示 。 
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图 2-5 展开 的 “属性 ”面板 
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图 2-6 浮动 面板 组 
5. 浮 动 面板 


在 Dreamweaver CC 工作 界面 的 右 侧 排列 着 一 些 浮动 面板 ， 这 些 面板 集中 了 网 页 编辑 和 站 点 管理 过 程 中 最 常用 的 一 些 工具 按钮 。 这 些 面板 被 集合 到 面板 组 中 ， 每 个 面板 组 都 可 以 展开 或 折 县 ， 并 且 可 以 
和 其 他 面板 停靠 在 一 起 或 取消 停靠 。 面 板 组 还 可 以 停靠 到 集成 的 应 用 程序 窗口 中 ， 不 会 使 工作 区 变 得 混乱 。 面 板 组 如 图 2-6 所 示 。 
2.2 在 Dreamweaver 中 搭建 站 点 


在 制作 网 页 前 ， 应 该 首先 在 本 地 创建 一 个 网 站 ， 用 以 实现 整个 站 点 。 这 是 为 了 能 更 好 地 利用 站 点 对 文件 进行 管理 ， 也 可 以 尽 可 能 地 减少 错误 (如 路 径 出 错 、 链 接 出 错 等 ) 。 新 手 做 网 页 ， 条 理性 、 结 构 
性 需要 加 强 ， 往 往 一 个 文件 放 这 里 ， 另 一 个 文件 放 那 里 ， 或 者 所 有 文件 都 放 在 同一 文件 夹 内 ， 这 样 就 显得 很 乱 。 建 议 建立 一 个 文件 夹 ， 用 于 存放 网 站 的 所 有 文件 ， 再 在 文件 内 建立 几 个 子 文件 夹 ， 将 文件 分 


类 ， 如 图 片 文件 放 在 “images” 文 件 夹 内 、HTML 文 件 放 在 根 目录 下 。 如 果 站 点 比较 大 ， 文 件 比较 多 ， 可 以 先 按 栏目 分 类 ， 在 栏目 里 再 分 类 。 在 站 点 制作 完毕 ， 通 过 测试 ， 确 保 网 站 没有 断 链 或 其 他 问题 的 
情况 下 ， 可 以 上 传 网 站 。 


2.2.1 ”使 用 向 导 建 立 站 点 


利用 Dreamweaver 可 以 在 本 地 计算 机 上 创建 出 网 站 的 框架 ， 从 整体 上 把 握 网 站 全 局 ， 完 成 网 站 文件 的 管理 和 测试 。 
可 以 使 用 “站 点 定义 向 导 ” 创 建 本 地 站 点 ， 具 体操 作 步 又 如 下 。 
01 启动 Dreamweaver， 选 择 菜单 栏 中 的 “站 点 ”| “新 建站 点 ”命令 ， 如 图 2-7 所 示 。 


02 ”弹出 “站 点 设置 对 象 ” 对 话 框 ， 在 对 话 框 中 单 击 “站 点 ”选项 卡 ， 在 “站 点 名 称 ” 文 本 框 中 输入 名 称 ， 可 以 根据 网 站 特点 起 一 个 名 字 ， 如 图 2-8 所 示 。 


Ctrl+Shift*D 
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在 站 点 定位 


图 2-7 选择 “新 建站 点 ”命令 
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图 2-8 输入 站 点 名 称 
03 单 击 “本 地 站 点 文件 夹 ”文本 框 右边 的 “浏览 文件 夹 ”按钮 ， 弹 出 “选择 根 文件 夹 ”对 话 框 ， 选 择 站 点 文件 ， 如 图 2-9 所 示 ， 单 击 “选择 文件 夹 ”按钮 。 


04 返回 “站 点 设置 对 象 ”对 话 框 ， 选 择 站 点 文件 夹 后 如 图 2-10 所 示 。 
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4210 ”指定 站 点 文件 夹 位 置 后 
05 单 击 “完成 ”按钮 ， 此 时 在 “文件 ”面板 中 可 以 看 到 创建 的 站 点 文件 ， 如 图 2-11 所 示 。 
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62-11 创建 的 站 点 


2.2.2 (НЕКЕ АГЫНЫ 


还 可 以 在 “站 点 设置 对 象 ”对 话 框 中 选择 “高 级 设置 ”选项 卡 ， 快 速 设置 “本 地 信息 ” “遮盖 ” Чернев" “文件 视图 列 ” “Contribute” “模板 “jQuery”“Web 字 体 ”和 “动画 资源 ”中 的 参 
数 来 创建 本 地 站 点 。 


01 打开 “站 点 设置 对 象 ” 对 话 框 ， 在 对 话 框 中 的 “高 级 设置 ”中 选择 “本 地 信息 ”选项 ， 如 图 2-12 所 示 。 


деца е 未 病名 站 点 2 


вве е 


ВВТ: © Уа O aR BSE 


1 


Dreamweaver 121 тА S a рч. ЖЕГЕ» Үтір 


ТЕТЕ і птен, йж 


ШАР ДЕСІ сі ііі 
М БІНЕ 


把 存 中 保存 着 站 点 中 的 文件 和 资源 信息 。 这 将 加 快 资源 面板 和 链 
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2-12 “本 地 信息 ”选项 
在 “本 地 信息 ”选项 中 可 以 设置 以 下 参数 。 
. 在 “默认 图 像 文 件 夹 ”文本 框 中 ， 输 入 此 站 点 的 默认 图 像 文件 夹 的 路 径 ， 或 者 单 击 文 件 夹 按钮 浏览 到 该 文件 夹 。 此 文件 夹 是 Dreamweaver 上 传 到 站 点 上 的 图 像 的 位 置 。 
“链接 相对 于 ”在 站 点 中 创建 指向 其 他 资源 或 页 面 的 链接 时 ， 指 定 Dreamweaver 创 建 的 链接 类 型 。Dreamweaver 可 以 创建 两 种 类 型 的 链接 : 文档 相对 链接 和 站 点 根 目 录 相 对 链接 。 
. 在 Web URIL 文 本 框 中 ,输入 Web 站 点 的 URL。Dreamweavet 使 用 Web URIL 创 建站 点 根 目 录 相 对 链接 ， 并 在 使 用 链接 检查 器 时 验证 这 些 链接 。 
“区 分 大 小 写 的 链接 检查 ”， 在 Dreamweaver 检 查 链接 时 ， 将 检查 链接 的 大 小 写 与 文件 名 的 大 小 写 是 否 相 匹配 。 此 选项 用 于 文件 名 区 分 大 小 写 的 UNIX 系 统 。 
“启用 缓存 ” 复 选 框 表示 指定 是 否 创建 本 地 缓存 以 提高 链接 和 站 点 管理 任务 的 速度 。 


02 ”在 对 话 框 的 “高 级 设置 ”中 选择 “遮盖 ”选项 ， 如 图 2-13 所 示 。 


图 2-13 “ЖЕ” Ал 


在 “遮盖 ”选项 中 可 以 设置 以 下 参数 。 
` 遮盖 具有 以 下 扩展 名 的 文件 : 勾 选 此 复 选 框 ， 可 以 对 特定 文件 名 结尾 的 文件 使 用 遮盖 。 


03 ”在 对 话 框 中 的 “高 级 设置 ”中 选择 “设计 备注 ”选项 ， 在 最 初 开 发 站 点 ， 需 要 记录 一 些 开 发 过 程 中 的 信息 、 备 忘 。 如 果 在 团队 中 开发 站 点 ， 需 要 记录 一 些 与 别人 共享 的 信息 ， 然 后 上 传 到 服务 器 ， 
供 别人 访问 ， 如 图 2-14 所 示 。 
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图 2-14 “设计 备注 ”选项 
在 “设计 备注 ”选项 中 可 以 进行 如 下 设置 。 
- 维护 设计 备注 : 勾 选 后 ， 可 以 保存 设计 备注 。 
. 清理 设计 备注 : 单 击 此 按钮 ， 删 除 过 去 保存 的 设计 备注 。 
` 启用 上 传 并 共享 设计 备注 : 可 以 在 上 传 或 取出 文件 的 时 候 ， 设 计 备 注 上 传 到 “远程 信息 ”中 设置 的 远 端 服务 器 上 。 


04 在 对 话 框 的 “高 级 设置 ”中 选择 “文件 视图 列 ” 选 项 ， 用 来 设置 站 点 管理 器 中 的 文件 浏览 器 窗口 所 显示 的 内 容 ， 如 图 2-15 所 示 。 


05 在 对 话 框 的 “高 级 设置 ”中 选择 Contribute 选 项 ， 勾 选 “ 启 用 Contribute 兼 容 性 ” 复 选 框 ， 则 可 以 提高 与 Conttibute 用 户 的 兼容 性 ， 如 图 2-16 所 示 。 
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# 2-16 Contribute 2 


06 ”在 对 话 框 的 “高 级 设置 ”中 选择 “模板 ”选项 ， 可 以 决定 是 否 改写 文档 相对 路 径 ， 如 图 2-17 所 示 。 


07 ”在 对 话 框 的 “高 级 设置 ”中 选择 jQuery 选项 ， 可 以 指定 资源 文件 来， 如 图 2-18 所 示 。 
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62-17 “模板 ”选项 


AR REAR 未 党 名 站 点 2 Ж 
НД -| 如 果 在 此 站 点 上 使 用 jQuery 构件 ， 需 要 指定 存 依 资源 的 位 置 。 
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62-18 “jQuery” #2 


08 ”在 对 话 框 的 “高 级 设置 ”中 选择 “Web 字 体 ” 选 项 ， 如 图 2-19 所 示 。 


09 在 对 话 框 的 “高 级 设置 ”中 选择 “动画 资源 ”选项 ， 如 图 2-20 所 示 。 
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4219 “Web 字体” 选项 
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92-20 “动画 资源 ”选项 


2.3 ”添加 文本 元 素 


一 般 来 说 ， 网 页 中 显示 最 多 的 是 文本 。 所 以 对 文本 的 控制 以 及 布局 在 设计 网 页 中 占 了 很 大 的 比重 ， 能 否 对 各 种 文本 控制 手段 运用 自如 ， 是 决定 网 页 设计 是 否 美观 、 是 否 富有 创意 及 提高 工作 效率 的 关 
键 。 


231 在 网 页 中 添加 文本 


在 文档 窗口 中 首先 将 光标 定位 在 要 添加 文本 的 位 置 ， 然 后 输入 文本 即 可 ， 也 可 以 将 其 他 应 用 程序 中 的 文本 复制 并 粘贴 到 相应 的 位 置 。 下 面 通过 实例 讲述 如 何在 网 页 中 输入 文字 ， 输 入 文本 前 效果 如 图 2- 
21 所 示 ， 输 入 文本 的 效果 如 图 2-22 所 示 ， 具体 操作 步骤 如 下 。 
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6221 输入 文本 前 效果 
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6222 ”输入 文本 后 效果 
01 打开 网 页 文档 ， 如 图 2-23 所 示 。 


02 将 光标 置 于 要 输入 文本 的 位 置 ， 输 入 文本 ， 如 图 2-24 所 示 。 
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4223 ”打开 网 页 文档 
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4224 输入 文本 
03 ”保存 文档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 ， 效 果 如 图 2-22 所 示 。 


提示 ”也 可 以 从 别处 复制 文字 ， 再 粘贴 到 文档 中 。 


2.3.2 插入 日 期 


当 需 要 在 网 页 的 指定 位 置 插入 准确 的 日 期 资料 时 ， 可 以 选择 菜单 栏 中 的 “插入 ”| “日 期 ”命令 来 实现 。 添 加 日 期 的 好 处 是 : 既 可 以 选用 不 同日 期 格式 ， 规 范 而 准确 地 表达 日 期 ， 同 时 该 命令 还 可 以 设置 
自动 更 新 ， 让 网 页 显示 当前 最 新 的 日 期 和 时 间 。 


下 面 通过 实例 讲述 如 何在 网 页 中 插入 时 间 效 果 ， 揪 入 时 间 前 效果 如 图 2-25 所 示 ， 插 入 时 间 后 的 效果 如 图 2-26 所 示 ， 具 体操 作 步 骤 如 下 。 
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62-25 ”插入 时 间 前 效果 
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82-26 插入 时 间 后 效果 


01 ”打开 网 页 文档 ， 如 图 2-27 所 示 。 
02 ”将 光标 置 于 要 插入 日 期 的 位 置 ， 选 择 菜单 栏 中 的 “插入 ”| “日 期 ” 命令， 选择 命令 后 ， 弹 出 “插入 日 期 ”对 话 框 ， 在 对 话 框 中 设置 相应 的 格式 ， 如 图 2-28 所 示 。 
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4227 打开 网 页 文档 


=н: [不 要 星期 


时 间 格式 : | [不要 时 间 ] 
O 储存 时 自动 更 新 


图 2-28 “插入 日 期 ”对 话 框 
在 “插入 日 期 ”对 话 框 中 主要 有 以 下 参数 。 
. 星期 格式 : 设置 星期 的 格式 。 
- 日 期 格式 : 设置 日 期 的 格式 。 
:时间 格式 : 设置 时 间 的 格式 。 
` 如 果 色 选 “ 存 储 时 自动 更 新 ” 复 选 框 ， 则 每 次 存储 文档 都 会 自动 更 新 文档 中 的 日 期 。 
提示 单 击 “常用 ”插入 栏 中 的 “日 期 ”按钮 ， 弹 出 “插入 日 期 ”对 话 框 ， 也 可 以 插入 日 期 。 


01 单 击 “ 确 定 ” 按 钮 ， 插 入 日 期 ， 如 图 2-29 所 示 。 
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42-29 ”插入 的 日 期 


02 保存 文档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 ， 效 果 如 图 2-26 所 示 。 


2.3.3 ”插入 特殊 字符 


字符 包括 换行 符 、 不 换行 空格 、 版 权 信 息 、 注 册 商 标 等 ， 这 些 都 是 网 页 中 经 常用 到 的 特殊 符号 ， 当 在 网 页 中 插入 特殊 符号 时 ， 在 “代码 ”视图 中 显示 的 是 特殊 字符 的 源 代 码 ， 在 “设计 ”视图 中 显示 的 


则 是 一 个 标志 。 


下 面 通过 实例 讲述 如 何在 网 页 中 插入 特殊 字符 ， 插 入 特殊 字符 前 效果 如 图 2-30 所 示 ， 插 入 特殊 字符 后 的 效果 如 图 2-31 所 示 ， 具体 操作 步骤 如 下 。 
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2-30 ”插入 特殊 字符 前 效果 
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8231 插入 特殊 字符 后 效果 


01 “打开 网 页 文档 ， 将 光标 置 于 要 插入 特殊 符号 的 位 置 ， 选 择 菜单 栏 中 的 “插入 ”|HIML| “字符 | 版 权 命令 ， 如 图 2-32 所 示 。 


02 ”选择 命令 后 ， 即 可 插入 版 权 字符 ， 如 图 2-33 所 示 。 
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4232 ”打开 网 页 文档 
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4233 ”插入 版 权 字 符 


03 ”保存 文档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 ， 效 果 如 图 2-31 所 示 。 


2.3.4 ЖА 


很 多 网 页 在 其 下 方 会 显示 一 条 水 平 线 ， 以 分 割 网 页 主题 内 容 和 底 端 的 版 权 声明 等 ， 根 据 设 计 的 需要 ， 也 可 以 在 网 页 任意 位 置 加 入 水 平 线 ， 达 到 区 分 网 页 中 不 同 内 容 的 目的 。 


下 面 通过 实例 讲述 如 何在 网 页 中 揪 入 水 平 线 ， 播 入 水 平 线 前 的 效果 如 图 2-34 所 示 ， 揪 入 水 平 线 后 的 效果 如 图 2-35 所 示 ， 具 体操 作 步 骤 如 下 。 
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62-4 ”插入 水 平 线 前 效果 
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4235 ”插入 水 平 线 后 效果 


01 打开 网 页 文档 ， 将 光标 置 于 要 播 入 水 平 线 的 位 置 ， 如 图 2-36 所 示 。 


02 ”选择 菜单 栏 中 的 “插入 ”|“ 水 平 线 ”命令 ， 即 可 插入 水 平 线 ， 如 图 2-37 所 示 。 
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图 2-37 ”插入 水 平 线 


03 ”选中 插入 的 水 平 线 ， 选 择 菜 单 栏 中 的 “窗口 ”|“ 属 性 ”命令 ， 打 开 “ 属 性 ”面板 ， 可 以 设置 水 平 线 的 属性 ， 如 图 2-38 所 示 。 
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图 2-38 “属性 ”面板 


04 保存 文档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 ， 效 果 如 图 2-35 所 示 。 


提示 在 “属性 ”面板 中 并 没有 提供 关于 水 平 线 颜 色 的 设置 选项 ， 如 果 需 要 改变 水 平 线 的 颜色 ， 在 源 代 码 中 更 改 〈htr color= “对 应 颜色 的 代码 ”) 即 可 。 


2.4 编辑 文本 格式 


Dreamweaver 提 供 了 多 种 不 同 的 尺寸 、 颜 色 和 样式 来 格式 化 文本 ， 使 用 文本 “属性 ”面板 可 以 改变 大 部 分 格式 。 


2.4.1 设置 文本 字体 


字体 对 网 页 中 的 文本 来 说 是 非常 重要 的 ，Dreamweaver 中 自 带 的 字体 比较 少 ， 可 以 在 Dreamweaver 的 字体 列表 中 添加 更 多 的 字体 ， 添 加 新 字体 的 具体 操作 步骤 如 下 。 

01 使 用 Dreamweavetr 打 开 网 页 文档 ， 在 “属性 ”面板 中 单 击 “ 字 体 ” 文 本 框 右边 的 小 三 角 ， 在 弹出 的 列表 中 选择 “管理 字体 ”选项 ， 如 图 2-39 所 示 。 

02 弹出 “管理 字体 ”对 话 框 ， 在 对 话 框 中 选择 “ 自 定义 字体 堆栈 ”选项 中 的 “可 用 字体 ”列表 框 中 选择 要 添加 的 字体 ， PES ЖЕШ ы рыда 的 “选择 的 字体 ”列表 框 中 ， 在 “字体 列表 ” 框 
中 也 会 显示 新 添加 的 字体 ， 如 图 2-40 所 示 。 重 复 以 上 操作 即 可 添加 多 种 字体 ， 若 要 取消 已 添加 的 字体 ， РЕТТЕ — FI 


03 单 击 “完成 ”按钮 ， 完 成 一 个 字体 样式 的 编辑 ， 选 中 该 样式 后 如 图 2-41 所 示 。 
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92-39 选择 “编辑 字体 列表 ”选项 
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4240 “编辑 字体 列表 ”对 话 框 
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242 ”设置 文本 大 小 


选择 一 种 合适 的 字号 ， 是 决定 网 页 美观 、 布 局 合理 的 关键 。 在 设置 网 页 时 ， 应 对 文本 设置 相应 的 字体 字号 ， 具 体操 作 步 又 如 下 。 
01 选中 要 设置 字号 的 文本 ,在 “属性 ”面板 的 “大 小 ”下 拉 列 表 中 选择 字号 的 大 小 ， 或 者 直接 在 文本 框 中 输入 相应 大 小 的 字号 ， 如 图 2-42 所 示 。 


02 选择 字号 后 即 可 完成 设置 字体 大 小 ， 如 图 2-43 所 示 。 
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4243 ”设置 字体 大 小 


还 可 以 改变 网 页 文本 的 颜色 ， 设 置 文本 颜色 的 具体 操作 步骤 如 下 。 


01 选中 设置 颜色 的 文本 ， 在 “属性 ”面板 中 单 击 “ 文 本 颜色 ”按钮 ， 打 开 如 图 2-44 所 示 的 调 色 板 。 


02 在 调 色 板 中 选中 所 需 的 颜色 ， 即 可 设置 文本 颜色 ， 如 图 2-45 所 示 。 
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2-45 设置 文本 颜色 


2.5 ЫН НУЫ АА 


超 链接 是 由 源 地 址 文件 和 目标 地 址 文件 构成 ， 当 访问 者 单 击 超 链 接 时 ， 浏 览 器 会 从 相应 的 目标 地 址 检索 网 页 并 显示 在 浏览 器 中 。 网 络 中 的 一 个 个 网 页 是 通过 超 链 接 的 形式 关联 在 一 起 的 。 可 以 说 超 链 接 
是 网 页 中 最 重要 、 最 根本 的 元 素 之 一 。 超 链接 的 作用 ， 是 在 因特网 上 建立 从 一 个 位 置 到 另 一 个 位 置 的 链接 。 如 果 目 标 地 址 不 是 网 页 而 是 其 他 类 型 的 文件 ， 浏 览 器 会 自动 调用 本 机 上 的 相关 程序 打开 所 用 访问 


的 文件 。 
在 网 页 中 按照 链接 路 径 的 不 同 可 以 分 为 2 种 形式 : 绝对 路 径 、 相 对 路 径 。 这 些 路 径 都 是 网 页 中 的 统一 资源 定位 ， 只 不 过 后 者 路 径 将 URL 的 通信 协议 和 主机 名 省 略 了 。 后 者 路 径 必 须 有 参照 物 ， 一 种 是 以 广 
档 为 参照 物 ， 另 一 种 是 以 站 点 的 根 目录 为 参照 物 。 而 第 一 种 路 径 就 不 需要 有 参照 物 ， 是 最 完整 的 路 径 ， 也 是 标准 的 URL。 


26 ”创建 链接 的 万 法 


使 用 Dreamweaver 创 建 链接 既 简 单 又 方便 ， 只 要 选中 要 设置 成 超 链接 的 文字 或 图 像 ， 然 后 应 用 以 下 几 种 方法 添加 相应 的 URL 即 可 。 


2.6.1 使 用 “属性 ”面板 创建 链接 


利用 “属性 ”面板 创建 链接 的 方法 很 简单 ， 选 择 要 创建 链接 的 对 象 ， 选 择 菜 单 栏 中 的 “窗口 ”|“ 属 性 ”命令 ， 打 开 “ 属 性 ”面板 。 在 “链接 ”文本 框 中 输入 要 链接 的 路 径 ， 即 可 创建 链接 ， 如 图 2-46 所 
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4246 “属性 ”面板 中 设置 链接 


2.6.2 ”使 用 指向 文件 图 标 创建 和 链接 


利用 直接 拖 动 的 方法 创建 链接 时 ， 要 先 建立 一 个 站 点 ， 选 择 菜 单 栏 中 的 “窗口 ”|“ 属 性” 
点 窗口 中 的 目标 文件 上 ， 松 开 鼠 标 即 可 创建 链接 ， 如 图 2-47 所 示 。 
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263 ”使 用 荣 单 合 令 创建 链接 
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x 


‚ 打开“ 属性 ”面板 ， 选 中 要 创建 链接 的 对 象 ， 在 面板 中 单 击 “ 指 向 文件 ”按钮 ， 按 住 按钮 不 放 拖 动 到 站 


使 用 菜单 命令 创建 链接 也 非常 简单 ， 选 中 创建 超 链 接 的 文本 ， 选 择 菜单 栏 中 的 “插入 ”|“Hyperlink” 命 令 ， 弹 出 “Hyperlink” 对 话 框 ， 如 图 2-48 所 示 。 在 “链接 ”文本 框 中 输入 链接 的 目标 ,或 单 
击 “ 链 接 ” 文 本 框 右边 的 “浏览 文件 ”按钮 ， 选 择 相 应 的 链接 目标 ， 单 击 “ 确 定 ”按钮 ， 即 可 创建 链接 。 
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62-7 指向 文件 图 标 创建 链接 


图 2-48 


Ë Hyperlink ”对 话 框 


27 ”技能 训 


练 
本 节 通 过 几 个 实例 来 巩固 所 学 的 知识 。 


技能 训练 1 一 一 创建 外 部 链接 


外 部 链接 就 是 使 用 绝对 路 径 ， 主 要 针对 站 点 之 间 的 链接 ， 如 友情 链接 、 网 址 导航 等 ， 当 单 击 创建 链接 的 文本 或 图 像 ， 如 图 2-49 链 接 前 效果 ， 链 接 后 如 图 2-50 所 示 。 具 体操 作 步 骤 如 下 。 
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图 2-49 创建 外 部 链接 前 的 效果 
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62-50 创建 外 部 链接 后 的 效果 
01 ”打开 网 页 文档 ， 选 中 要 创建 链接 的 文本 ， 如 图 2-51 所 示 。 


02 打开 “属性 ”面板 ， 在 属性 面板 中 的 “链接 ”文本 框 中 直接 输入 “indexl.html”， 在 “目标 ”下 拉 列 表 中 选择 _blank 选 项 ， 以 便 在 新 的 浏览 器 窗口 中 显示 网 页 ， 如 图 2-52 所 示 。 
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62-5 ”打开 网 页 文档 
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图 2-52 ”输入 链接 


03 保存 网 页 文档 ， 按 F12 功 能 键 进入 浏览 器 ， 效 果 如 图 2-50 所 示 。 
技能 训练 2 一 一 创建 E-mail 链接 


在 网 页 上 创建 E-mail 链接 ， 可 以 使 浏览 者 快速 反馈 自己 的 意见 。 当 浏览 者 单 击 电子 邮件 链接 时 ， 可 以 立即 打开 浏览 器 默认 的 E-mail 处 理 程序 ， 收 件 人 邮件 地 址 被 电子 邮件 链接 中 指定 的 地 址 自动 更 新 ， 
无 须 浏览 者 输入 。 下 面 通过 实例 介绍 E-mail 链接 的 创建 方法 。 创 建 E-mail 链 接 前 的 效果 如 图 2-53 所 示 ， 创 建 E-mail 链 接 的 效果 后 如 图 2-54 所 示 ， 具 体操 作 步 骤 如 下 。 


提示 单 击 电子 邮件 链接 后 ， 系 统 将 自动 启动 电子 邮件 软件 ， 并 在 收 件 人 地 址 中 自动 填写 上 电子 邮件 链接 所 指定 的 邮箱 地 址 。 
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2-53 ”创建 E-mail 链 接 前 的 效果 
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62-54 ”创建 E-mail 链接 后 的 效果 


01 ”打开 网 页 文档 ， 将 光标 置 于 要 创建 电子 邮件 的 位 置 ， 如 图 2-55 所 示 。 


02 选择 菜单 栏 中 的 “插入 ”| “电子 邮件 链接 ”命令 ， 弹 出 “电子 邮件 链接 ”对 话 框 ， 在 对 话 框 中 的 “文本 ”文本 框 中 输入 “联系 我 们 ”， 在 “电子 邮件 ”文本 框 中 输入 sdhzgw(@163.com， 如 图 2-56 
所 示 。 
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4256 “电子 邮件 链接 ”对 话 框 


03 单 击 “确定 ”按钮 ， 创 建 E-mail 链 接 ， 如 图 2-57 所 示 。 
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2-57 创建 E-mail 链接 

04 保存 文档 ， 按 F12 功 能 键 进入 浏览 器 预览 效果 ， 单 击 创建 的 电子 邮件 链接 ， 将 弹出 “新 邮件 ”对 话 框 ， 如 图 2-55 所 示 。 
技能 训练 3 一 一 创建 下 载 文 件 的 链接 


有 的 网 站 提供 非常 丰富 的 资料 供 浏览 者 下 载 ， 这 时 就 需要 创建 下 载 链接 。 网 站 中 的 每 个 下 载 链接 的 文件 对 应 一 个 下 载 链接 。 如 果 需 要 对 多 个 文件 或 文件 夹 提 供 下 载 ， 必 须 将 这 些 文 件 压缩 为 一 个 文件 ， 
创建 文件 下 载 前 的 效果 如 图 2-58 所 示 ， 创 建 下 载 文 件 链接 后 的 效果 如 图 2-59 所 示 ， 具 体操 作 步 又 如 下 。 


BEA RAE , ИВТ 


Te create a residential envionment tó build ë spiritisal home 


Copyright © 2001 一 2014 ШЕРІ ER. сова | ADAE | REH | ол? | 9 рк 


ا" 


4258 创建 下 载 文件 链接 前 的 效果 
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4259 ”创建 下 载 文件 链接 后 的 效果 


01 “打开 网 页 文档 ， 选 中 要 创建 下 载 文件 的 文字 ， 打 开 “ 属 性 ”面板 ， 单 击 “ 链 接 ” 文 本 框 右边 的 “浏览 ”按钮 ， 如 图 2-60 所 示 。 


02 弹出 “选择 文件 ”对 话 框 ， 在 对 话 框 中 选择 文件 ， 如 图 2-61 所 示 。 


提示 ”网 站 中 每 个 下 载 文件 必须 对 应 一 个 下 载 链接 ， 而 不 能 为 多 个 文件 或 一 个 文件 夹 建立 下 载 链接 ， 如 果 需 要 对 多 个 文件 或 文件 夹 提 供 下 载 ， 只 能 利用 压缩 软件 将 这 些 文 件 或 文件 夹 压缩 为 一 个 文件 。 
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62-60 “打开 网 页 文档 
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92-61 选择 文件 
03 # “Жж” 按钮， 在 “目标 ”下 拉 列 表 中 选择 _parent， 如 图 2-62 所 示 。 
=e 
ESO 段落 ~ 类 x | 
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图 2-62 设置 链接 目标 


04 保存 文档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 ， 单 击 超 链接 将 弹出 “下 载 文 件 ” 对话 框 ,提示 打开 或 保存 文件 ， 效 果 如 图 2-59 所 示 。 


技能 训练 4 一 一 创建 图 像 热点 链接 
有 些 网 页 在 一 幅 大 图 片上 做 了 多 个 链接 ， 这 样 访问 者 可 以 通过 单 击 图 片 的 不 同位 置 进 入 不 同 的 页 面 ， 这 是 应 用 了 图 像 热 点 链接 。 下 面 通过 实例 创建 图 像 热 点 链接 。 创 建 图 像 热 点 链接 前 的 效果 如 图 2-63 


Рог, 创建 热点 链接 后 的 效果 如 图 2-64 所 示 ， 具 体操 作 步 又 如 下 。 
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图 2-63 创建 图 像 热 点 链接 前 的 效果 
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图 2-64 图像 热点 链接 后 的 效果 


提示 “ 当 预 览 网 页 时 ， 热 点 链接 不 会 显示 ， 当 光标 移 至 热点 链接 上 时 会 变 为 手 形 ， 以 提示 浏览 者 该 处 为 超 链接 。 


01 ”打开 网 页 文档 ， 在 文档 中 选中 需要 设置 热点 的 图 像 ， 如 图 2-65 所 示 。 


02 ”打开 “属性 ”面板 ， 在 “属性 ”面板 中 选择 天 形 热 点 工具 ， 如 图 2-66 所 示 。 
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图 2-65 “打开 网 页 文档 
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62-6 HEHEHE LA 
提示 在 “属性 ”面板 中 包括 3 种 热点 工具 ， 分 别 是 矩形 热点 工具 、 椭 圆 形 热点 工具 和 多 边 形 热点 工具 ， 可 以 根据 需要 选择 相应 的 热点 工具 。 


03 按 住 鼠 标 左 键 在 图 像 中 绘制 矩形 热点 ， 如 图 2-67 所 示 。 


04 在 “属性 ”面板 中 “链接 ”文本 框 中 单 击 后 面 的 “浏览 ”按钮 ， 弹 出 “选择 文件 ”对 话 框 ， 选 择 要 链接 的 文件 ， 如 图 2-68 所 示 。 
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图 2-67 ”绘制 热点 
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62-68 绘制 其 他 热点 


提示 ”图像 热点 链接 和 图 像 链接 有 很 多 相似 之 处 ， 有 些 情 况 下 你 在 浏览 器 中 甚至 都 分 辨 不 出 它们 。 虽 然 它们 的 最 终 效 果 基 本 相同 ， 但 两 者 实现 的 原理 还 是 有 很 大 差异 的 。 读 者 在 为 自己 的 网 页 加 入 链接 
之 前 ， 应 根据 具体 的 实际 情况 ， 选 择 和 使 用 适合 的 链接 方式 。 


05 保存 网 页 ， 按 F12 功 能 键 进入 浏览 器 预览 效果 ， 链 接 效 果 如 图 2-64 所 示 。 


技能 训练 5 一 一 创建 基本 文本 网 页 


本 章 主要 讲述 了 创建 网 页 文本 的 基本 知识 ， 下 面 通过 实例 讲述 如 何 创建 基本 文本 网 页 的 效果 ， 创 建文 本 网 页 前 效果 如 图 2-69 所 示 ， 创 建 基 本 文本 网 页 后 的 效果 如 图 2-70 所 示 ， 具 体操 作 步 又 如 下 。 
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62-9 ”创建 文本 网 页 前 效果 
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4270 创建 基本 文本 网 页 后 效果 
01 ”打开 网 页 文档 ， 如 图 2-71 所 示 。 
02 将 光标 置 于 要 输入 文字 的 位 置 ， 输 入 文字 ， 如 图 2-72 所 示 。 


03 设置 文本 的 大 小 ， 将 光标 置 于 文字 开头 ， 按 住 鼠 标的 左 键 向 下 拖 动 至 文字 结尾 ， 选 中 所 有 的 文字 ， 在 “属性 ”面板 中 单 击 “ 大 小 ”右边 的 文本 框 ， 在 弹出 的 菜单 中 选择 文字 的 大 小 ， 如 图 2-73 所 
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62-71 打开 网 页 文档 
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2-72 输入 文字 


04 设置 字体 颜色 ， 单 击 “ 文 本 颜色 ”按钮 ， 在 打开 的 调 色 板 中 设置 文本 的 颜色 为 #0BC502， 如 图 2-74 所 示 。 
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8273 ”设置 文字 的 大 小 


图 2-74 设置 文本 颜色 


05 “将 光标 置 于 要 插入 特殊 字符 的 位 置 ， 选 择 菜 单 栏 中 的 “插入 ”| “HTM” | “字符 ” |“ 版权” 命令， 插入 版 权 字符 ， 如 图 2-75 所 示 。 
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4275 ”插入 特殊 字符 


06 保存 文档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 ， 效 果 如 图 2-70 所 示 。 


За ”用 图 像 和 多 媒体 美化 网 页 


图 像 和 多 媒体 与 文本 一 样 ， 是 网 页 中 重要 的 元 素 ,合理 使 用 图 像 和 多 媒体 可 以 增强 网 页 的 丰富 性 和 美观 性 。 它 具有 强大 的 视觉 冲击 力 ， 吸 引 越 来 越 多 的 眼球 ， 制 作 精 巧 、 设 计 合理 的 图 像 和 多 媒体 能 加 


深 浏览 者 浏览 网 页 的 兴趣 和 动力 。 本 章 将 详细 讲述 图 像 和 多 媒体 在 网 页 中 的 运用 ， 学 习 如 何在 网 页 中 插入 图 像 、 设 置 图 像 属 性 、 插 入 其 他 图 像 元 素 和 插入 多 媒体 等 。 


` 在 网 页 中 使 用 图 像 

- 插入 其 他 的 网 页 图 像 

' 添加 背景 音乐 

. 插入 其 他 的 媒体 对 象 

` 创建 鼠标 经 过 图 像 导 航 栏 


制作 图 文 并 茂 的 网 页 


3.1 在 网 页 中 使 用 图 像 


图 像 是 网 页 中 不 可 缺少 的 素材 ， 利 用 丰富 多 彩 的 图 像 可 以 使 页 面 呈现 绚丽 多 彩 的 效果 。 将 图 像 插 入 到 Dreamweaver 文 档 时 ，Dreamweaver 自 动 在 HTML 源 代码 中 生成 对 该 图 像 文件 的 引用 代码 。 为 了 
确保 此 引用 的 正确 性 ， 该 图 像 文件 必须 位 于 当前 站 点 中 。 如 果 图 像 文 件 不 在 当前 站 点 中 ，Dreamweaver 会 询问 是 否 将 此 文件 复制 到 当前 站 点 中 。 


3.1.1 插入 图 像 


本 节 通 过 实例 讲述 如 何在 网 页 中 插入 图 像 ， 在 网 页 中 插入 图 像 前 的 效果 如 图 3-1 所 示 ， 在 网 页 中 插入 图 像 后 的 效果 如 图 3-2 所 示 ， 具 体操 作 步 又 如 下 。 
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打开 网 页 文档 ， 如 图 3-3 所 示 。 
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图 3-1 在 网 页 中 插入 图 像 前 的 效果 
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63-2 ”在 网 页 中 插入 图 像 后 的 效果 


ВЕ” | “图 像 ”命令 ， 弹 出 “选择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 中 选择 图 像 文 件 ， 如 图 3-4 所 示 。 


02 “将 光标 置 于 要 插入 图 像 的 位 置 ， 选 择 菜单 栏 中 的 “插入 ”| 
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3-3 ”打开 网 页 文档 


w O ае images" Др 


maaa [шшш 


+ 
1273557703 1273557857 


d |‏ اا Ов ыы ыы‏ فوا ے 
|O t(D аларта: қайта: әда Бан‏ 
а НР) қақысы‏ | 
KERR (G)‏ = 
=k ры? x:‏ 
Еш ша ЕЕЕ‏ 
HHEN: | “ | ЁЁ у АП Израз рер“‏ 


Сара 


图 3-4 “选择 图 像 源 文 件 ” 对 话 杠 


提示 单 击 “ 常 用 ”插入 栏 中 的 “图 像 ” 按 钮 [ы], 弹出 “选择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 中 选择 相应 的 图 像 ， 也 可 以 插入 图 像 。 


03 单 击 “确定 ”按钮 ， 插 入 图 像 ， 如 图 3-5 所 示 。 
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A35 ”插入 图 像 


04 保存 文档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 ， 效 果 如 图 3-2 所 示 。 


312 ”设置 图 像 属性 


选择 插入 的 图 像 ， 可 以 通过 “属性 ”面板 设置 图 像 的 名 称 、 高 、 链 接 、 源 文件 位 置 和 替换 文字 等 。 


本 节 通 过 实例 讲述 如 何 设置 图 像 的 属性 。 设 置 图 像 属性 前 效果 如 图 3-6 所 示 ， 设 置 图 像 属 性 后 效果 如 图 3-7 所 示 ， 具 体操 作 步 骤 如 下 。 
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图 3-6 设置 图 像 属性 前 效果 
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637 设置 图 像 属性 后 效果 


01 ”打开 网 页 文档 ， 选 中 插入 的 图 像 ， 如 图 3-8 所 示 。 


02 ”在 “属性 ”面板 中 通过 改变 图 像 的 “ 宽 ” 和 “高 ”来 调整 图 像 的 大 小 ， 如 图 3-9 所 示 。 
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图 3-8 打开 网 页 文档 
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639 ”调整 图 像 大 小 
03 在 “替换 ”文本 框 中 输入 “ 瑞 英 制药 ”， 即 可 为 图 像 设置 替换 ， 如 图 3-10 所 示 。 


04 选中 插入 的 图 像 ， 打 开 代码 视图 ， 设 置 图 像 对 齐 方式 为 “ 右 对 齐 ”， 如 图 3-11 所 示 。 保 存 文档 ， 在 浏览 器 中 预览 效果 如 图 3-7 所 示 。 
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图 3-10 ”为 图 像 设 置 替换 
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图 3-11 设置 对 齐 方 式 


3.1.3 ЭБУ 


Dreamweaver CC 提供 基本 图 像 编 辑 功能 ， 无 须 使 用 外 部 图 像 编 辑 应 用 程序 即 可 修改 图 像 。 使 用 Dreamweaver CC 内 置 的 基本 图 像 编 辑 功 能 可 以 裁剪 图 像 ， 以 删除 图 像 中 不 需要 的 部 分 。 


本 节 通 过 实例 讲述 如 何 裁剪 图 像 ， 裁 剪 图 像 前 效果 如 图 3-12 所 示 ， 裁 剪 图 像 后 效果 如 图 3-13 所 示 ， 具 体操 作 步 又 如 下 。 
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63-2 ”裁剪 图 像 前 效果 
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图 3-13 ”裁剪 图 像 后 效果 


01 ”打开 网 页 文档 ， 选 中 要 裁剪 的 图 像 ， 如 图 3-14 所 示 。 


02 选择 菜单 栏 中 的 “修改 ”| “А” | “АЯ” ое, ад “БН” вата ҖИ” | 弹出 Diteamweavet 提 示 对 话 框 ， 如 图 3-15 所 示 。 


提示 ”使 用 Dreamweaver CC 裁剪 图 像 时 ， 会 更 改 磁 盘 上 的 源 图 像 文 件 ， 因 此 需要 事先 备份 图 像 文件 ， 以 备 在 需要 恢复 到 原始 图 像 时 使 用 。 
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图 3-14 ”打开 网 页 文档 
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13-15 ”提示 对 话 框 


03 单 击 “确定 ”按钮 ， 此 时 图 像 的 周围 出 现 裁剪 控制 点 ， 如 图 3-16 所 示 。 


04 ”调整 裁剪 控制 点 至 合适 大 小 ， 在 边界 框 内 部 双击 或 按 Entet 键 裁剪 所 选区 域 ， 如 图 3-17 所 示 。 
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图 3-16 ”出 现 裁剪 控制 点 
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05 保存 文档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 ， 效 果 如 图 3-13 所 示 。 
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可 以 直接 在 Dreamweaver CC 中 调整 图 像 的 亮度 和 对 比 度 ， 对 图 像 的 高 亮 显示 、 阴 影 和 中 间 色 调 进行 简单 的 调整 。 
本 节 通 过 实例 讲述 如 何 调整 图 像 亮度 和 对 比 度 ， 有 具体 操作 步骤 如 下 。 


01 ”打开 网 页 文档 ， 选 中 要 调整 亮度 和 对 比 度 的 图 像 ， 如 图 3-18 所 示 。 


02 ”选择 菜单 栏 中 的 “修改 ”| “BR | “亮度 /对 比 度 ” 命 令 ,， 或 在 “属性 ”面板 中 单 击 “亮度 和 对 比 度 ”按钮 М 弹出 “亮度 /对 比 度 ” 对 话 框 ， 如 图 3-19 所 示 。 


提示 在 对 话 框 中 拖 动 亮度 和 对 比 度 的 滑 块 ， 向 左 滑动 为 降低 ， 向 右 滑动 为 增加 ， 取 值 范围 为 -100~100， 勾 选 “ 预 览 ” 复 选 框 ， 可 以 在 调整 图 像 的 同时 预览 到 对 该 图 像 所 做 的 修改 。 
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图 3-19 “亮度 /对 比 度 ” 对 话 框 
03 ”在 对 话 框 中 调整 合适 的 亮度 /对 比 度 ， 单 击 “ 确 定 ” 按 钮 ， 调 整 图 像 亮 度 和 对 比 度 。 


04 保存 文 档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 效果 。 


3.1.5 ЗЕ 


铝 化 图 像 可 以 通过 增加 图 像 中 边缘 的 对 比 度 来 调整 图 像 的 焦点 。 本 节 通 过 实例 讲述 锐 化 图 像 的 操作 ， 具 体操 作 步 骤 如 下 。 


01 打开 网 页 文档 ， 选 中 要 锐 化 的 图 像 ， 如 图 3-20 所 示 。 


02 选择 菜单 栏 中 的 “ 修 政 ”| “图 像 ”|“ 锐 化 ”命令 ,或 在 “属性 ”面板 中 单 击 “ 锐 化 ”按钮 д ， 弹 出 “ 锐 化 ”对 话 框 ， 如 图 3-21 所 示 。 
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图 3-21 “ 锐 化 ”对 话 框 


03 ”在 对 话 框 中 拖 动 锐 化 的 滑 块 ， 调 至 合适 的 位 置 ， 单 击 “确定 ” 按 钮 ， 调 整 图像 锐 化 。 


3.2 ”插入 其 他 图 像 元 素 


在 网 页 中 不 仅 可 以 插入 图 像 ， 还 可 以 插入 其 他 的 图 像 元 素 ， 如 插入 背景 图 像 和 插入 鼠标 经 过 图 像 等 ， 下 面 分 别 进行 讲述 。 
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改变 网 页 的 背景 颜色 可 以 得 到 不 同 颜色 的 背景 ， 但 是 背景 颜色 始终 是 一 种 单一 的 颜色 ， 要 使 背景 更 丰富 ， 可 以 设置 网 页 的 背景 图 像 。 设 置 网 页 的 背景 图 像 的 具体 操作 步骤 如 下 。 
01 ê Dreamweaver CC 软件 ， 新 建 空白 文档 ， 如 图 3-22 所 示 。 


02 选择 菜单 栏 中 的 “修改 ”| “页 面 属性 ”命令 ， 弹 出 “页 面 属性 ”对 话 框 ， 在 对 话 框 的 “分 类 ”选项 中 选择 “外 观 ”， 如 图 3-23 所 示 。 
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4322 ”新 建 空白 文档 
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图 3-23 添加 背景 图 像 文件 


03 单 击 “背景 图 像 ” 文 本 框 右边 的 “浏览 ”按钮 ， 弹 出 “选择 图 像 源 文 件 ” 对 话 框 ， 在 对 话 框 中 选择 背景 图 像 bj.jpg， 如 图 3-24 所 示 。 


04 单 击 “ 确 定 ” 按 钮 ， 插 入 背景 图 像 ， 如 图 3-25 所 示 。 
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图 3-25 ”插入 背景 图 像 


3.2.2 ВУ 


鼠标 经 过 图 像 是 一 种 在 浏览 器 中 查看 并 当 鼠 标 指针 移 过 它 时 发 生变 化 的 图 像 。 本 节 通 过 实例 讲述 鼠标 经 过 图 像 的 插入 操作 ， 如 图 3-26 所 示 是 鼠标 经 过 前 的 效果 ， 如 图 3-27 所 示 是 鼠标 经 过 时 的 效果 ， 具 
体操 作 步 骤 如 下 。 
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6327 ”鼠标 经 过 图 像 时 的 效果 


01 打开 网 页 文档 ， 如 图 3-28 所 示 。 


02 “将 光标 置 于 插入 鼠标 经 过 图 像 的 位 置 ， 选 择 菜 单 栏 中 的 “插入 ”| “图 像 ”|“ 和 鼠标 经 过 图 像 ” 命 令 ， 弹 出 “插入 鼠标 经 过 图 像 ” 对 话 框 ， 如 图 3-29 所 示 。 
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图 3-29 “插入 鼠标 经 过 图 像 ”对 话 杠 


03 单 击 “原始 图 像 ”文本 框 右边 的 “浏览 ”按钮 ， 弹 出 “原始 图 像 : ”对 话 框 ， 如 图 3-30 所 示 。 在 对 话 框 中 选择 图 像 文 件 ， 单 击 “ 确 定 ” 按 钮 ， 添 加 到 对 话 框 。 


04 在 图 3-29 中 单 击 “鼠标 经 过 图 像 ” 文 本 框 右边 的 “浏览 ”按钮 ， 弹 出 “和 鼠标 经 过 图 像 : ”对 话 框 ， 如 图 3-31 所 示 ， 在 对 话 框 中 选择 图 像 文件 。 
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05 单 击 “ 确 定 ” 按 钮 ， 添 加 图 像 到 对 话 框 中 ， 如 图 3-32 所 示 。 
06 单 击 “ 确 定 ” 按 钮 ， 插 入 和 鼠标 经 过 图 像 ， 如 图 3-33 所 示 。 


提示 单 击 “常用 ”插入 栏 中 的 “鼠标 经 过 图 像 ” 按 钮 ， 弹 出 “ 揪 入 鼠标 经 过 图 像 ” 对 话 框 ， 也 可 以 播 入 鼠标 经 过 图 像 。 将 “常用 ” 播 入 栏 中 的 “鼠标 经 过 图 像 ” xala Exam 
位 置 ， 弹 出 “插入 和 鼠标 经 过 图 像 ”对 话 框 ， 也 可 以 插入 和 鼠标 经 过 图 像 。 
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#3-32 ”添加 到 对 话 框 
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07 ”保存 文档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 ， 鼠 标 经 过 图 像 前 与 鼠标 经 过 图 像 时 的 效果 分 别 如 图 3-26 和 图 3-27 所 示 。 


3.3 ”使 用 代码 提示 添加 背景 音乐 


为 网 页 加 入 背景 音乐 ， 使 访问 者 一 进入 网 站 就 能 听 到 优美 的 音乐 ， 可 以 大 大 增强 网 站 的 娱乐 性 。 为 网 页 添加 背景 音乐 的 方法 很 简单 ， 既 可 以 通过 插件 添加 ， 也 可 以 通过 代码 提示 添加 ， 下 面 分 别 进行 讲 
Ж. 


通过 代码 提示 ， 可 以 在 “代码 ”视图 中 插入 代码 。 在 输入 某 些 字符 时 ， 将 显示 一 个 列表 ， 列 出 完成 条 目 所 需要 的 选项 。 下 面 通过 代码 提示 讲述 背景 音乐 的 插入 ， 效 果 如 图 3-34 所 示 ， 具 体操 作 步 骤 如 
та 


63-4 ”插入 背景 音乐 效果 


打开 网 页 文档 ， 如 图 3-35 所 示 。 


切换 到 “代码 ”视图 ， 在 “代码 ”视图 中 找到 标签 <body>， 并 在 其 后 面 输入 “<” 以 显示 标签 列表 ,输入 “<” 时 会 自动 弹出 一 个 列表 框 ， 向 下 滚动 该 列表 并 选中 标签 bgsound， 如 图 3-36 所 示 。 
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4335 ”打开 网 页 文档 
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图 3-36 ”选中 标签 begsound 
ШОК ”Bgsound 标 签 共有 5 个 属性 ， 其 中 balance 用 于 设置 音乐 的 左右 均衡 ，delay 用 于 设置 进行 播放 过 程 中 的 延 时 ，loop 用 于 控制 循环 次 数 ，stc 用 于 存放 音乐 文件 的 路 径 ，volume 用 于 调节 音量 。 


03 ”双击 插入 该 标签 ， 如 果 该 标签 支持 属性 ， 则 按 空格 键 以 显示 该 标签 允许 的 属性 列表 ， 从 中 选择 属性 src， 如 图 3-37 所 示 。 这 个 属性 用 来 设置 背景 音乐 文件 的 路 径 。 


04 ” 按 Enter 键 后 ， 出 现 “ 浏 览 ” 字样， 单 击 以 弹出 “选择 文件 ”对话 框 ， 在 对 话 框 中 选择 音乐 文件 ， 如 图 3-38 所 示 。 
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4338 “选择 文件 ”对 话 框 


提示 ”播放 的 背景 音乐 文件 容量 不 要 太 大 ， 否 则 很 可 能 整个 网 页 都 浏览 完了 ， 声 音 却 还 没有 下 载 完 。 在 背景 音乐 格式 方面 ，mid 格 式 是 最 好 的 选择 ， 它 不 仅 拥 有 不 错 的 音质 ， 最 关键 的 是 它 的 容量 非常 
小 ， 一 般 只 有 几 十 KB。 


05 ”选择 音乐 文件 后 ， 单 击 “ 确 定 ” 按 钮 。 在 新 插入 的 代码 后 按 空格 键 ， 在 属性 列表 中 选择 属性 loop， 如 图 3-39 所 示 。 


06 出现 -1 并 选中 。 在 最 后 的 属性 值 后 ， 为 该 标签 输入 “> ”， 如 图 3-40 所 示 。 
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图 3-39 ”选择 属性 loop 
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4 3-40 输入 и” 


07 ”保存 文 档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 ， 效 果 如 图 3-34 所 示 。 


34 ”插入 其 他 媒体 对 象 


在 网 页 中 除了 可 以 插入 图 像 和 背景 音乐 外 ， 还 可 以 插入 Flash 动 画 、Java 小 程序 等 其 他 媒体 对 象 。 


3.4.1 插入 Flash 动 画 


在 网 页 中 可 以 很 方便 地 插入 Flash 动 画 ， 下 面 通过 实例 讲述 Flash 动 画 的 插入 方法 ， 插 入 Flash 动 画 前 效果 如 图 3-41 所 示 ， 插 入 Flash 动 画 后 效果 如 图 3-42 所 示 ， 具 体操 作 步 又 如 下 。 
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8342 ”插入 Flash 动 画 后 效果 


01 ”打开 网 页 文档 ， 如 图 3-43 所 示 。 


02 ”将 光标 置 于 相应 的 位 置 ， 选 择 菜单 栏 中 的 “ 糙 入 ”| “媒体 ”| “FlashSWF” 命 令 ， 弹 出 “选择 SWF” 对 话 框 ， 在 对 话 框 中 选择 相应 的 SWF 文 件 ， 如 图 3-44 所 示 。 


03 单 击 “确定 ”按钮 ， 插 入 Flash SWF 文件 ， 如 图 3-45 所 示 。 
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4344 “选择 文件 ”对 话 框 


04 选中 插入 的 Flash SWF， 打 开 “ 属 性 ”面板 ， 如 图 3-46 所 示 ， 在 面板 中 单 击 “播放 ”按钮 ， 在 文档 窗口 中 预览 插入 的 Flash SWF 文件 。 
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图 3-45 ”插入 Flash SWF 
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图 3-46 Flash SWF 的 “属性 ”面板 


05 保存 文档 ， 按 F12 功 能 键 进 入 浏览 器 中 预览 ， 效 果 如 图 3-42 所 示 。 


34.2 插入 Flash Video 


利用 视频 技术 ， 在 网 上 可 以 进行 视频 聊天 、 在 线 看 电影 等 操作 。 在 网 页 中 插入 Flash Video 主 要 有 两 种 方法 ， 一 种 方法 是 利用 ActiveX 插 入 ， 另 一 种 方法 是 利用 插件 插入 ， 插 入 Flash Video 文 件 前 效果 如 
图 3-47 所 示 ， 播 入 Flash Video 文 件 后 效果 如 图 3-48 所 示 ， 具 体操 作 步 又 如 下 。 
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3-47 插入 Flash Video 前 效果 
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图 3-48 45 AFlash Video 后 效果 
01 打开 网 页 文档 ， 如 图 3-49 所 示 。 
02 将 光标 置 于 网 页 中 插入 Flash Video 文 件 的 位 置 ， 选 择 菜 单 栏 中 的 “插入 ”| “媒体 ”| “Flash Video ”命令 ， 弹 出 “插入 FLV” 对 话 框 ， 单 击 “URL” 文 本 框 右 侧 的 “浏览 ”， 如 图 3-50 所 示 。 
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93-50 “ЖАҒУ” 对 话 框 
ОЗ ”弹出 “选择 FLV” 对 话 框 ， 在 对 话 框 中 选择 “shipin.flv” 文 件 ， 如 图 3-51 所 示 。 


04 单 击 “确定 ”按钮 ， 输 入 “shipin.flv” 文 件 的 路 径 ，“ 宽 度 ” 设 置 为 280，“ 高 度 ” 设 置 为 250， 如 图 3-52 所 示 。 
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图 3-53 ”插入 Flash Video 


06 保存 文档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 ， 效 果 如 图 3-48 所 示 。 


3.5 #8 


本 章 主要 讲述 了 如 何在 网 页 中 插入 图 像 、 设 置 图 像 属 性 、 在 网 页 中 简单 编辑 图 像 和 插入 其 他 图 像 元 素 等 ， 下 面 通过 以 上 所 学 到 的 知识 来 具体 讲述 。 


技能 训练 1 一 创建 鼠标 经 过 图 像 导 航 栏 


下 面 通过 实例 讲述 创建 鼠标 经 过 图 像 导航 的 方法 ， 鼠 标示 经 过 图 像 导航 栏 时 的 效果 如 图 3-54 所 示 ， 当 鼠标 经 过 图 像 导航 栏 时 的 效果 如 图 3-55 所 示 ， 具 体操 作 步 又 如 下 。 
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63-54 ”鼠标 未 经 过 图 像 时 的 效果 
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63-55 ”鼠标 经 过 图 像 时 的 效果 
01 打开 网 页 文档 ， 如 图 3-56 所 示 。 


02 “将 光标 置 于 要 插入 鼠标 经 过 图 像 的 位 置 ， 选 择 菜 单 栏 中 的 “插入 ”| “图 像 ”| “和 鼠标 经 过 图 像 ” 命令， 弹出 “插入 鼠标 经 过 图 像 ” 对 话 框 ， 如 图 3-57 所 示 。 
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图 3-56 ”打开 网 页 文档 


揪 人 页 标 经 过 图 你 
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4357 “ARRAIA” пин 
03 单 击 “原始 图 像 ”文本 框 右边 的 “浏览 ”按钮 ， 在 弹出 的 对 话 框 中 选择 图 像 文件 ， 如 图 3-58 所 示 。 单 击 “确定 ”按钮 ， 添 加 到 对 话 框 。 


04 ŽE КЕНИИ" 文本 框 右边 的 “浏览 ”按钮 ， 在 弹出 的 如 图 3-59 所 示 的 对 话 框 中 选择 图 像 文件 。 
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4358 “原始 图 像 : ”对 话 框 
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图 3-59 ” “和 鼠标 经 过 图 像 : ”对话 框 
05 单 击 “确定 ”按钮 ， 将 图 像 添加 到 对 话 框 中 ， 如 图 3-60 所 示 。 


06 单 击 “ 确 定 ” 按 钮 ， 插 入 鼠标 经 过 图 像 ， 如 图 3-61 所 示 。 


插入 鼠标 经 过 图 你 
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图 3-60 ”添加 到 对 话 框 
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3-61 插入 鼠标 经 过 图 像 
07 ”按照 步骤 (2) 一 步骤 (6) 的 方法 插入 其 他 的 导航 翻转 图 像 ， 如 图 3-62 所 示 。 
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63-52 ”插入 其 他 的 导航 翻转 图 像 


08 ”保存 文档 ， 按 F12 功 能 键 进 入 浏览 器 中 预览 ， 鼠 标 未 经 过 图 像 导 航 栏 与 鼠标 经 过 图 像 导 航 栏 时 的 效果 分 别 如 图 3-54 和 图 3-55 所 示 。 


技能 训练 2 一 一 创建 图 文 并 成 的 网 页 


Dreamweaver CC 提供 了 强大 的 图 文 混 排 功能 ， 为 网 页 设计 注入 活力 。 下 面 通过 实例 讲述 图 文 并 成 的 方法 ， 插 入 图 像 前 的 效果 如 图 3-63 所 示 ， 插 入 图 像 混 排 后 的 网 页 效果 如 图 3-64 所 示 ， 具 体操 作 步 又 
如 下 。 
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4363 ”插入 图 像 前 的 效果 
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打开 网 页 文档 ， 如 图 3-65 所 示 。 
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图 3-64 ”图 文 混 排 的 网 页 效果 


将 光标 置 于 要 插入 图 像 的 位 置 ， 选 择 菜单 栏 中 的 “插入 ”| “图 像 ”| “图像 ”命令 ， 弹 出 “选择 图 像 源 文 件 ” 对 话 框 ， 在 对 话 框 中 选择 图 像 文件 ， 如 图 3-66 所 示 。 
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83-65 ”打开 网 页 文档 
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图 3-66 ”选择 图 像 源 文件 ”对 话 框 


03 单 击 “确定 ”按钮 ， 插 入 图 像 ， 如 图 3-67 所 示 。 


04 ”选中 图 像 ， 右 击 ， 在 弹出 的 菜单 中 选择 “对 齐 ”|“ 右 对 齐 ” 选 项 ， 如 图 3-68 所 示 。 
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63-7 插入 图 像 
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63-58 设置 对 齐 方式 


05 保存 文档 ， 按 F12 功 能 键 进 入 浏览 器 中 预览 ， 效 果 如 图 3-64 所 示 。 


第 4 章 ”使 用 表格 布局 排版 网 页 


Dreamweaver CC 提供 了 多 种 方法 来 创建 和 控制 网 页 布局 ， 最 常用 的 方法 就 是 使 用 表格 ,使 用 表格 可 以 简化 页 面 布 局 的 设计 过 程 。 本 章 主要 讲述 了 如 何 插入 表格 、 编 辑 表格 、 设 置 表格 属性 和 整理 表格 


本 章 重点 
在 网 页 中 插入 表格 
` 设置 表格 属性 
` 选择 表格 元 素 
` 表格 的 基本 操作 
创建 细 线 表格 


创建 贺 角 表格 


41 插入 表格 


在 Adobe Dreamweaver CC 中 ， 表 格 可 以 用 于 制作 简单 的 图 表 ， 还 可 以 用 于 安排 网 页 文档 的 整体 布局 ， 起 着 非常 重要 的 作用 。 


4.1.1 表格 的 基本 概念 


在 开始 制作 表格 之 前 ， 先 对 表格 的 各 部 分 名 称 做 简单 介绍 。 如 图 4-1 所 示 为 表格 的 各 部 分 名 称 。 


图 4-1 表格 的 各 部 分 名 称 


.一 张 表格 横向 叫 行 ， 纵 向 叫 列 。 行 列 交叉 部 分 就 叫做 单元 格 。 
.单元 格 中 的 内 容 和 边框 之 间 的 距离 叫 边 距 。 
单元 格 和 单元 格 之 间 的 距离 叫 间距 。 


整 张 表 格 的 边缘 叫做 边框 。 


4.1.2 插入 表格 


在 网 页 中 插入 表格 的 方法 非常 简单 ， 具 体操 作 步 又 如 下 。 
01 ”打开 网 页 文档 ， 如 图 4-2 所 示 。 


02 “将 光标 置 于 要 插入 表格 的 位 置 ， 选 择 菜单 栏 中 的 “插入 ”| “表格 ”命令 ， 弹 出 “表格 ”对 话 框 ， 在 对 话 框 中 将 “ 行 数 ” 设 置 为 3，“ 列 ”设置 为 3，“ 表 格 宽度 ”设置 为 500 像 素 ， 如 图 4-3 所 示 。 
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442 ”打开 网 页 文档 
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03 单 击 “确定 ”按钮 ， 插 入 表格 ， 如 图 4-4 所 示 。 


DW жын MRE вол хп тәм) ето Өзі) мәні 窗口 (Wj ЕН) Ett Em о- 2 


F і қ гт. НЕ FCA. EEN 
REL із | 设计 |" | 


гт палас MET Гей" HEPAT ы СИ рма тыл ГР талға, 

ЕГ тти? Зу алыл ақта Ту 
БІРНЕ. TIPSER- AEAEE ERAF. 
Ент-тжіййаТт: 


- m=... š "w ü "m š "m "u" "a Е "a š "a š “a š "a š “a аа "a š “a Š "a š "a š "m š "m За "a Ë "a š “a Ë “a š "m Š “m а "a š "š š "s š "a Ë ШЫ, 
HF- Ы 
Li = i 2 

Ч 
š г, и ще š 1 
i то = "aa "ë Ë "ü "= E“; š "= ITT Ú “sQ "a "P" "a ИРА š "a "a ШЙ "а Ши та а "а Wm HE "ü" Е "E ри ри "ы" ы" ри "a" ии и) "a "a" „= "a'a "a" "a" ш 
Г; T ... г: ч 
: l | 日 
in 所 有 主 : i 
: и == ` 

= 


. 
د‎ JU балынын ا ا اا‎ До До F. од فا‎ 
пн ниши = ии пи ни ии ви 


maj اة‎ š ай йа" гарги ق‎ 
" 


Ети 

ШЕН” г 

шт: мин 
ж 
H 


š 
' 
' 
' 
' 
i 
' 
' 
' 
' 
i 
š 
' 
' 
' 
' 
Ё 
' 
' 
' 
' 
š 
š 
' 
' 
' 
' 
š 
' 
' 
' 
' 
š 
š 
' 
' 
' 
' 
ы ETT LTA жары хілстұ БҰТЫ ү ы H 8 раға FE Bar" Ч | 
104! 
' 
' 
š 
š 
' 
' 
' 
' 
i 
П 
' 
' 
' 
i 
i 
' 
' 
' 
' 
š 
П 
' 
' 
' 
i 
š 
' 
' 
' 
! 
š 
П 
' 
' 
' 
š 
š 
' 
' 
' 
' 
i 
1 
1 
1 
П 
š 
š 
' 
' 
' 
' 
š 
' 
' 


a 
Ж 
5" er 
= = ГН . 
- қ .. = 
Ё и. ' Fi 
і Е 
' 
и = 
کے‎ Fe Pe رک‎ Fe ر ر رک کر‎ РА ТЫЛЫН ГОР Pr ЦИ 


| 
3 
„ 
3 
š 
3 
3 
5 
x 
3 
3 
ч 


ыы калы a Ë 


ҰЛ» Сын» ош, ыза» ишан 


+ 


El. свада ы к +4 е Те п Ш Ба 9:660 


— Нн НЕ с iii iii i iS SE 


844 插入 表格 


提示 在 “常用 ”插入 栏 中 单 击 表格 按钮 =” ， 可 弹出 “表格 ”对 话 框 。 


42 ”设置 表格 属性 


为 了 使 表格 更 具 特 色 ， 需 要 在 表格 “属性 ”面板 中 对 表格 的 背景 和 边框 等 进行 设置 。 通 过 修改 面板 中 的 参数 可 以 快速 编辑 表格 的 外 观 。 如 果 窗 口中 没有 显示 “属性 ”面板 ,可 执行 “窗口 ”|“ 属 性 ” 命 


<, 打开 “属性 ”面板 。 


421 ”设置 表格 的 属性 


选中 整个 表格 ， 可 以 在 “属性 ”面板 中 设置 表格 的 相关 参数 ， 将 “Cellpad” 设 置 为 5，“ellSpace” 设 置 为 5，“Align” 设置 为 “居中 对 齐 ”， 如 图 4-5 所 示 。 


Dw x= RE БЕС) ЖАП) fO) tO Фес HES. Om ЖИН) Extract < ш = Ll. 


index him” х Е Ыш эй м Шы ЫЗЫ, 5 ЕЕЕ - L ни. Қылық шайы ПА -Е Е 
є еер сп. 25: PFD. 055 T 
а Е ot 

Е те [TN ТП ра я л 1 sy 7 ЕЕ. Г 村 Sri 
: НЫСЫ 209 Ги. ш, 


кар и үч, 


E 


Spring. vitality 


Ка FA, қапыл ағ (апаларға көм H Mh as FOR aE 
РЕЖ ТИ ВАРИ LUTE па ВАЛЫ кел и калып H Pit kawsa иң. 
H "нй НЫ "мас À idae ВОИ 


ш. къмкаци- га Зарщоахванниати, 
Ea ES м и Е 


Ез | ананы! rr "ap a in an aa три iaka in an an mu ba ia. РЧ ыыы ы ыыы ин рил | 


: Е: £ ыд 
Сй Ор. AKU Е 


Ae—r — і‏ لملم ا ا سملم 


a 


“ЖАКЕ 


ш ш ш и,"‏ کے کے کے کے کے کے کے کے کے کے کے کے کے کے کے کے کے کے کے کے 


“ 
МАЛА АЛА ы ы ная и 


ЕЛ Во ду ді" table Ebo ду 


T 


td> tables tbody tro td [ЕТЕ B Û ЕЕ as зам. 


Гы ЯН Ë | = | m [ | = ее = g 5 е 
ЕЕ Ше Е | Еу) | Bo ! (ЕЕ “| бараа В | Aim Ehi Class = F С?) 
Cols 3 | а брасе f Forder 0 


на Ізі с Е 


= 
Ta 
图 4-5 设置 表格 的 属性 

表格 “属性 ”面板 中 主要 有 以 下 参数 。 

表格 : 设置 表格 的 ID。 

Сов: 表格 中 行 和 列 的 数量 。 

Яо: 以 像素 为 单位 ， 表 示 为 占 浏览 器 窗口 宽度 的 百分比 

` Cellpad: 单元 格 内容 和 单元 格 边界 之 间 的 像素 数 。 

- ellSpace: 相 邻 的 表格 单元 格 间 的 像素 数 。 

- Align: 设置 表格 的 对 齐 方式 ， 该 下 拉 列 表 框 中 共 包 含 4 个 选项 ， 即 “ 软 认 ”“ 左 对 齐 ”“ 居 中 对 齐 ” 和 “ 右 对 齐 ”。 

- Border: 用 来 设置 表格 边框 的 宽度 。 

' class: 对 该 表格 设置 一 个 CSS 类 。 


د 
用 于 清除 列 宽 。‏ 


E 将 表格 宽度 转换 为 像素 。 


(7% 


将 表格 宽度 转换 为 百 分 


422 ”设置 单元 格 属性 


对 于 表格 的 行 、 列 、 单 元 格 的 属性 ， 可 以 通过 “属性 ”面板 来 设置 。 选 中 需要 设置 属性 的 行 、 列 或 单元 格 ， 打 开 “ 属 性 ”面板 ， 如 图 4-6 所 示 。 
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#46 ”单元 格 “ 属 性 ”面板 
单元 格 “ 属 性 ”面板 中 主要 有 以 下 参数 。 
KP: 设置 单元 格 中 对 象 的 对 齐 方式 ， 该 下 拉 列 表 框 中 包括 “默认 ”“ 左 对 齐 ”“ 居 中 对 齐 ” 和 “ 右 对 齐 ”4 个 选项 。 
Фй: 也 是 设置 单元 格 中 对 象 的 对 齐 方式 ， 该 下 拉 列 表 框 中 包括 “默认 ” “顶端 ”“ 居 中 ”“ 底 部 ”和 “基线 ”5 个 选项 。 
Же: 用 于 设置 单元 格 的 宽 和 高 。 
КИН: 表示 单元 格 的 宽度 将 随 文字 长 度 的 不 断 增 加 而 加 长 。 


` 标题 : 将 当前 单元 格 设置 为 标题 行 


ПОЛ е: аа ы, 在 打开 的 颜色 选择 器 中 选择 颜色 。 


4.3 ”选择 表格 元 素 


要 想 在 文档 中 对 一 个 元 素 进行 编辑 ， 那 么 首先 要 选择 它 ; 同样， 要 想 对 表格 进行 编辑 ， 首 先 也 要 选中 它 。 下 面具 体 讲解 如 何 选择 表格 。 


4.3.1 选取 表格 


可 以 一 次 选择 整个 表格 、 行 或 列 ， 也 可 以 选择 一 个 或 多 个 单独 的 单元 格 。 
主要 有 以 下 几 种 方法 选取 整个 表格 。 
. 单 击 表格 上 任意 一 条 边框 线 ， 可 以 选择 整个 表格 ， 如 图 4-7 所 示 。 


. 将 光标 置 于 表格 内 的 任意 位 置 ， 选 择 菜单 栏 中 的 “修改 ”| “表格 ”| “选择 表格 ”命令 ， 如 图 4-8 所 示 。 
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图 4-7 单 击 边框 线 选择 表格 
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图 4-8 选择 “选择 表格 ”命令 


- 将 光标 放置 在 表格 的 左上 角 ， 按 住 鼠 标 左 键 不 放 拖 动 到 表格 的 右 下 角 ， 右 击 ， 在 弹出 的 快捷 单 中 选择 “表格 ”| “选择 表格 ”命令 ， 如 图 4-9 所 示 。 


.将 光标 置 于 表格 内 任意 位 置 ， 单 击 文档 窗口 左下 角 的 标记 ， 如 图 4-10 所 示 。 
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图 4-9 选择 “选择 表格 ”命令 
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4.3.2 ”选取 行 或 列 


选择 表格 的 行 与 列 也 有 两 种 不 同 的 方法 。 


将 鼠标 指针 位 于 要 选择 的 列 顶 或 行 首 时 ， 当 其 形状 变 成 了 黑 箭头 时 ， 单 击 即 可 选中 列 或 行 ， 如 图 4-11 和 图 4-12 所 示 。 
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44-11 选择 列 
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8412 ”选择 行 


` 按 住 鼠标 左 键 不 放 从 左 至 右 或 从 上 至 下 拖 屋 ， 即 可 选中 列 或 行 ， 如 图 4-13 和 图 4-14 所 示 。 
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64-13 ”选择 列 
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64-14 ”选择 行 


提示 还 有 一 种 方法 只 可 以 选中 行 ， 将 光标 置 于 要 选择 的 行 中 ， 然 后 单 击 窗口 左下 角 的 <tt> 标 记 ， 这 种 方法 只 能 选择 行 ， 而 不 能 选择 列 。 


4.3.3 ”选取 单元 格 


有 以 下 几 种 方法 可 以 选择 单个 单元 格 : 
° 按 住 Cttl 键 ， 然 后 单 击 要 选中 的 单元 格 。 
° 将 光标 置 于 要 选择 的 单元 格 中 ， 然 后 按 住 Cttl 十 A 组 合 键 ， 即 可 选中 该 单元 格 。 


. 将 光标 置 于 要 选择 的 单元 格 中 ， 选 择 菜单 栏 中 的 “编辑 ”| “全 选 ” 命 令 ， 即 可 选中 该 单元 格 。 


.将 光标 置 于 要 选择 的 单元 格 中 ， 然 后 单 击 文档 窗口 左下 角 的 <td> 标 记 ， 也 可 以 选中 单元 格 ， 如 图 4-15 所 示 。 
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4415 ”选中 单元 格 


若 要 选择 多 个 相 邻 的 单元 格 ， 首 先 应 该 将 光标 移动 到 要 选中 的 相 邻 单元 格 中 的 第 一 个 单元 格 中 ， 然 后 单 击 并 拖 动 鼠标 至 最 后 一 个 单元 格 ， 即 可 选中 该 组 相 邻 的 单元 格 ， 如 图 4-16 所 示 。 另 外 ， 还 可 以 先 
单 击 一 个 单元 格 ， 然 后 按 住 Shift 键 在 最 后 一 个 单元 格 中 单 击 ， 也 可 选中 该 相 邻 的 单元 格 。 


若 要 选中 多 个 不 相 邻 的 单元 格 ， 则 可 以 按 住 Ctrl 键 ， 然 后 依次 单 击 想 要 选择 的 单元 格 即 可 ， 如 图 4-17 所 示 。 在 按 住 Ctrl 键 的 同时 再 次 单 击 已 选中 的 单元 格 ， 则 可 以 取消 对 该 单元 格 的 选 定 。 
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4416 ”选择 多 个 相 邻 的 单元 格 
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4417 选择 多 个 不 相 邻 的 单元 格 
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44 ”表格 的 基本 操作 


表格 创建 好 以 后 可 能 达 不 到 需要 的 效果 ， 这 时 就 需要 对 表格 进行 编辑 操作 ， 如 调整 表格 高 度 和 宽度 、 单 元 格 的 合并 及 拆 分 、 行 或 列 的 删除 等 ， 下 面具 体 讲解 如 何 进 行 这 些 操作 。 


441 调整 表格 高 度 和 宽度 


用 “属性 ”面板 中 的 “ 宽 ” 和 “高 ”文本 框 能 精确 地 调整 表格 的 大 小 ， 而 用 鼠标 拖 动 调整 则 更 为 方便 快捷 ， 调 整 表格 大 小 的 操作 步骤 如 下 。 


01 ”调整 列 宽 : 把 光标 置 于 表格 右边 的 边框 上 ， 当 鼠标 变 成 为 时 ， 拖 动 鼠 标 即 可 调整 单元 格 的 宽度 ， 如 图 4-18 所 示 ， 同 时 也 调整 了 表格 的 宽度 ， 对 行 不 产生 影响 。 把 光标 置 于 表格 中 间 列 边框 上 ， 当 鼠 
标 变 成 时 ， 拖 动 鼠 标 可 以 调整 其 两 边 列 单元 格 宽度 ， 调 整 后 的 效果 如 图 4-19 所 示 。 
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8418 调整 列 宽 
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02 调整 行 高 ; 把 光标 置 于 表格 底部 边框 或 者 中 间 行 线 上 ， ажа, 拖 动 鼠标 即 可 调整 行 的 高 度 ， 如 图 4-20 所 示 ， 调 整 行 高 后 如 图 4-21 所 示 。 
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如 图 4-27 所 示 。 
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图 4-26 ”调整 表格 的 宽 和 高 
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94-27 调整 表格 宽 和 高 后 


4.4.2 ”添加 或 删除 行 或 列 


在 已 创建 的 表格 中 添加 行 或 列 ， 要 先 将 光标 置 于 要 添加 行 或 列 的 单元 格 中 ， 选 择 菜单 栏 中 的 “修改 ”| “表格 ”|“ 插 入行” 命令 ， 则 在 光标 所 在 单元 格 的 上 面 增加 了 一 行 ， 如 图 4-28 所 示 。 
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8428 ЖАЛ 
将 光标 置 于 表格 的 第 1 列 中 ， 选 择 菜 单 栏 中 的 “修改 ”|“ 表 格 ”|“ 播 入 列 ” 命 令 ， 则 在 光标 所 在 单元 格 的 左 侧 增加 了 一 列 ， 如 图 4-29 所 示 。 


择 菜 单 栏 中 的 “修改 ”| “表格 ”|“ 插 入行 或 列 ” 命 令 ， 弹 出 “插入 行 或 列 ”对 话 框 ， 在 对 话 框 中 进行 相应 的 设置 ， 如 图 4-30 所 示 ， 单 击 “ 确 定 ”按钮 ， 即 可 插入 行 或 列 。 
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4430 “插入 行 或 列 ” 对 话 框 


提示 “将 光标 置 于 要 播 入 行 或 列 的 单元 格 内 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “表格 ”| “插入 行 ”选项 或 “表格 ”|“ 插 入 列 ” 选 项 ， 也 可 以 插入 行 或 列 。 
将 光标 置 于 要 删除 行 中 的 任意 一 个 单元 格 ， 选 择 菜单 栏 中 的 “修改 ”| “表格 ”| “删除 行 ”命令 ， 即 可 删除 当前 行 ， 如 图 4-31 所 示 为 删除 行 后 的 效果 。 


将 光标 置 于 要 删除 列 中 的 任意 一 个 单元 格 ， 选 择 菜单 栏 中 的 “修改 ”| “表格 ”| “删除 列 ”命令 ， 即 可 删除 当前 列 ， 如 图 4-32 所 示 为 删除 列 后 的 效果 。 
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64-35 删除 行 后 
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4-32 ЖІ] Б 


4.4.3 ” 拆 分 单元 格 


开 分 单元 格 的 具体 操作 步骤 如 下 。 
ОТ ”如果 要 拆 分 单元 格 ， 选 择 菜单 栏 中 的 “修改 ”| “表格 ”| “ 拆 分 单元 格 ” 命 令 ， 弹 出 “ 折 分 单元 格 ” 对 话 框 ， 如 图 4-33 所 示 。 


02 ”在 对 话 框 中 ， 如 果 选 择 “ 单 元 格 拆 分 ”为 “ 行 ”， 下 边 将 出 现 “ 行 数 ”， 然 后 在 文本 框 中 输入 要 拆 分 多 少 行 ;， 如 果 选 择 “ 单 元 格 拆 分 ”为 “ 列 ”， 下 边 将 出 现 “ 列 数 ”， 然 后 在 文本 框 中 输入 要 拆 
分 多 少 列 。 如 图 4-34 所 示 是 把 当前 单元 格 拆 分 为 4 列 后 的 效果 。 
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4433 ЖЛ ЛЕ 
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4434 ” 拆 分 单元 格 


Шора 拆 分 单元 格 还 有 以 下 两 种 方法 。 


.将 光标 置 于 要 拆 分 的 单元 格 中 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “表格 ”| “ 拆 分 单元 格 ” 选 项 ， 弹 出 “ 拆 分 单元 格 ” 对 话 框 ， 也 可 以 拆 分 单元 格 。 


. 将 光标 置 子 要 折 分 的 单元 格 中 ， 在 “属性 ”面板 中 单 击 “ 折 分 单元 格 为 行 或 列 ” 核 名 冉 国 。 вв 。 扩 分 单元 格 ”对 话 框 ， 也 可 以 新 分 单元 格 。 


444 合并 单元 格 


如 果 要 合并 单元 格 ， 需 先 选中 要 合并 的 单元 格 ， 然 后 选择 菜单 栏 中 的 “修改 ”| “表格 ”| “合并 单元 格 ” 命 令 ， 如 图 4-35 所 示 是 合并 单元 格 后 的 效果 。 


Dw хене же mm ЕТТЕ EAIM ШО BHO kamus, ШП) НІН) Extract „| E Q L= DEBE! 
езбек Бата" x | 

Серан, M.S рга, 095 
| ЖА) f | 设计 |" 


Spring. vitality 


Ë= AT: DEHL 1 ==. kispi: ге G отлага ти ет 
=ë" тт ашын БЕН та ШЫ p Баг Е че л И. та RGS 1 ВАЛИ TEM 9 i 
Mis аера 一 一 一 一 一 一 一 一 


Lr pi 
WIDE тариеит. 


Е БАН А . x “Жу түтігі, Рега THE - ETE E - сеты HET те тут ЕЕ = Ер тата плътен а Жоғ Tg а 3 3 

ав и А ыл : š AT EM -—- == -4- ша аи го Ne р ЕЕЕ | `В 

m Е д а ==. £ E и Bit Үз, Е 

или оли mese em | сета 

іч 所 有 宝贝 ШЕ: i 

ғ a": рала pomm Т L. in", LL Ги rimin Да, Ca 本 Ë : : 

ІЗ ЖШ г Е J-i 

ET Ee ET LT LTE LA LA LTA ETT F + Е ' 

үн НШ ІНЕ 1 

Г ыыы. тін ы тыш w". тш" ылығы, са Е i | 

|=; RF £ ; 14 

Е ToT TT eT š ' 

і = z 424 

Ë ERAT Е E | 

|-- T т жа анан па. sanan жесек £ š : ' ы | 
с» Бобу Пт teble ъф tr tl ка Шу к TH table tha tr Ü EZ] 992 = БТВ 


4435 ”合并 单元 格 后 的 效果 
提示 ”合并 单元 格 还 有 以 下 两 种 方法 。 


选中 要 合并 的 单元 格 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “表格 ”| “合并 单元 格 ” 选 项 ， 也 可 以 将 单元 格 合并 。 


选中 要 合并 的 单元 格 ， 单 击 “ 属 性 ”面板 中 的 “合并 所 选单 元 格 ， 使 用 跨度 ”按钮 ， 也 可 以 合并 单元 格 。 


445 PSU). А, къ ПЕЕВА 


Зоја, ЗОРЕЖЕНЕ НО ің” |“ 拷贝” 命令, 或 者 按 Ctrl+ C 组 合 键 ， 即 可 将 选中 的 表格 复制 。 而 选择 菜单 栏 中 的 “编辑 | ВИД" вр, ВС + ХЕ, Врела), ЯП 
图 4-36 所 示 。 


先 择 菜 单 栏 中 的 “编辑 ”| “粘贴 ”命令 ， 或 者 按 Ctrl + V 组 合 键 ， 即 可 粘贴 表格 ， 如 图 4-37 所 示 。 
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图 4-37 ”粘贴 表格 


45 技能 训 


练 


前 面 主要 介绍 了 表格 的 基本 操作 方法 ， 下 面 通过 一 些 实例 来 介绍 表格 在 网 页 排版 布局 中 的 应 用 。 
技能 训练 1 一 一 创建 细 线 表格 


合理 利用 表格 可 以 方便 地 美化 页 面 ， 下 面 利用 设置 表格 和 单元 格 的 背景 颜色 来 制作 细 线 表格 。 制 作 细 线 表格 前 效果 如 图 4-38 所 示 ， 制 作 细 线 表格 后 效果 如 图 4-39 所 示 ， 具 体操 作 步 又 如 下 。 
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84-38 制作 细 线 表格 前 效果 
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4439 ” 细 线 表格 后 效果 


提示 “有 些 读 者 可 能 会 说 ， 这 不 就 是 如 了 边框 颜色 的 表格 ， 把 边框 宽度 设 成 最 小 的 值 1 吗 ， 有 什么 新 鲜 的 ? 没关系 ， 你 可 以 试 一 下 ， 就 算 你 把 边框 宽度 设 成 最 小 的 值 1， 可 以 说 它 也 不 是 真正 的 细 线 表 
格 。 真 正 的 细 线 表格 不 是 通过 设置 边框 来 制作 的 。 边 框 为 1 的 表格 在 浏览 器 中 看 起 来 还 是 有 些 奢 策 ， 虽 然 它 已 经 是 最 小 值 了 ， 但 在 实际 应 用 中 基本 上 没有 人 会 去 使 用 这 种 表格 。 


01 打开 网 页 文档 ， 如 图 4-40 所 示 。 
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4440 ”打开 网 页 文档 

02 将 光标 置 于 要 插入 表格 的 位 置 ， 选 择 菜单 栏 中 的 “插入 ”| “表格 ”命令 ， 弹 出 “表格 ”对 话 框 ,将 “ 行 数 ” 设 置 为 4，“ 列 ”设置 为 4，“ 表 格 宽度 ”设置 为 600 像 素 ， 如 图 4-41 所 示 。 


03 单 击 “确定 ”按钮 ， 插 入 表格 ， 如 图 4-42 所 示 。 
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4442 ”插入 表格 
04 选中 插入 的 表格 ， 打 开 “ 属 性 ”面板 ,将 “Cellpad” 设 置 为 4，“ellSpace” 设 置 为 0 ，“boder” 设 置 为 1，“Align” 设 置 为 “居中 对 齐 ”， 如 图 4-43 所 示 。 


05 ”打开 “代码 ”视图 ， 在 表格 的 代码 中 输入 磊 色 代码 bordercolor="#25BBF9"， 设 置 表 格 边 框 闫 色 ， 如 图 4-44 所 示 。 
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4-43 ”设置 表格 属性 
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4-44 设置 边框 颜色 
06 “将 光标 置 于 表格 的 第 1 行 第 1 列 单元 格 中 ， 向 下 拖 动 鼠标 ， 选 中 所 有 的 单元 格 ， 将 单元 格 的 “背景 颜色 ”设置 为 #D3FF88， 如 图 4-45 所 示 。 


07 ”在 单元 格 中 输入 相应 的 文字 和 内 容 ， 如 图 4-46 所 示 。 
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4445 ”设置 单元 格 的 颜色 
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4446 ”设置 单元 格 的 颜色 
08 保存 文档 ， 按 F12 功 能 键 进 入 浏览 器 中 预览 ， 效 果 如 图 4-39 所 示 。 
技能 训练 2 一 制作 圆 角 表格 


表格 是 网 页 制作 中 最 为 重要 的 一 个 对 象 ， 因 为 通常 的 网 页 都 是 依靠 表格 来 布局 版 面 和 组 织 各 元 素 的 ， 它 直接 决定 了 网 页 是 否 美观 、 内 容 组 织 是 否 清 晰 。 如 果 表 格 的 四 周 加 上 圆 角 ， 这 样 可 以 避免 直接 使 
用 直角 表格 ， 而 显得 呆板 ， 下 面 通过 实例 讲述 如 何 制作 圆 角 表格 ， 制 作 圆 角 表 格 前 效果 如 图 4-47 所 示 ， 制 作 圆 角 表 格 后 效果 如 图 4-48 所 示 ， 具 体操 作 步 又 如 下 。 


01 ”打开 网 页 文档 ， 如 图 4-49 所 示 。 将 光标 置 于 要 插入 表格 的 位 置 ， 选 择 菜单 栏 中 的 “插入 ”| “表格 ”命令 ， 弹 出 “表格 ”对 话 框 ， 将 “ 行 数 ”设置 为 2，“ 列 ”设置 为 1， 如 图 4-50 所 示 。 
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4447 制作 圆 角 表格 前 效果 
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4448 ”制作 圆 角 表格 效果 
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8449 ”打开 网 页 文档 


4450 “表格 ”对 话 框 


02 单 击 “确定 ”按钮 ， 插 入 表格 ， 此 表格 记 为 表格 1， 如 图 4-51 所 示 。 


03 ”将 光标 置 于 表格 1 的 第 1 行 单元 格 中 ， 打 开 代 码 视 图 ， 在 代码 中 输入 背景 图 像 代码 background=images/bg03.gif， 如 图 4-52 所 示 。 
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94-51 插入 表格 1 
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8452 ”输入 代码 


04 返回 设计 视图 ， 可 以 看 到 插入 的 背景 图 像 ， 如 图 4-53 所 示 。 


05 “将 光标 置 于 背景 图 像 上 ， 选 择 菜单 栏 中 的 “插入 ”|“ 表 格 ” 命 令 ， 插 入 2 行 1 列 的 表格 ， 此 表格 记 为 表格 2 ， 表 格 4-54 所 示 。 
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4453 ”插入 背景 图 像 
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64-54 插入 表格 2 


06 ”将 光标 置 于 表格 2 的 第 1 行 单元 格 中 ， 选 择 菜单 中 的 “插入 ”| “图 像 | 图像 命令， 弹出 “选择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 中 选择 图 像 文件 ， 如 图 4-55 所 示 。 


07 单 击 “确定 ” 按钮， 插入 圆 角 图 像 images/info_right1.gif， 如 图 4-56 所 示 。 
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4455 “选择 图 像 源 文件 ”对 话 框 
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94-56 ”插入 圆 角 图 像 
08 ”将 光标 置 于 表格 2 的 第 2 行 单元 格 中 ， 选 择 菜单 栏 中 的 “插入 ”| “表格 ”命令 ， 播 入 1 行 1 列 的 表格 ， 此 表格 记 为 表格 3， 如 图 4-57 所 示 。 


09 在 表格 3 的 单元 格 中 输入 相应 的 文字 ， 并 设置 文字 的 属性 ， 如 图 4-58 所 示 。 
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图 4-57 ”插入 表格 3 
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图 4-58 输入 文字 


10 “将 光标 置 于 文字 中 ， 选 择 菜 单 中 的 “插入 ”| “Щй” | “图 像 ”命令 ， 在 弹出 的 对 话 框 中 选择 图 像 文件 ， 播 入 图 像 images/tul.jpg， 如 图 4-59 所 示 。 


11 ”选中 插入 的 图 像 ， 右 击 ， 在 弹出 的 菜单 中 选择 “对 齐 ”| “ 右 对 齐 ” 命 令 ， 如 图 4-60 所 示 。 


Dw == МБ EEN WA ЕМ) ЕО ве шшс ВП) ЖЕН Er 
index him" x | ша ЕЕЕ ЕТ ЕТЕР kha | 
ETAD тЫ. ere | 
ILA Жа | w |* 


а 
š БЕ па айа ЕВЕ ы. Шы aga sa ПЕЕ йа айа ša йй айй бин 555 ова ПИ ОЕП WII ГИ ПЁ! С = 
. 


Е 
: 
: 
4 


1 Р" š 
ЕСЕ: 


А 
РЕ қа. 


225 тШ АННА ЕН ЕЕЬЖИЩЕННЯЯ ЫШ” М ЕН ИЕШЕ ПЕТ Tam FERE) 
ПЕ вн. 


агы 


Ент-Еагкантығ (ШШЕН ЕШ. тн ERFERS TARAS 
HESTA, 


RETEST 


| | 
i э | 1 | 
: =i 1 ! 
š : i 
і SE Haho :| Ща | 
В... ЕР | 
3 ы Ж 
3 ж 2 | 
52. Бес, Жа. | 


3 ЭшЕзізізтауыытісс-ижькі йш пазтетаение. эже EEE HEB | 
SERS. ӘНБЕЗЕЕШФ | xr ER S mm NS: ЩЕТНЕТ жизни. #пятават пак ; 
тегини ж-ны пзи. Е 
Жу НЫ. Наз ы а ЗЫ Шыу к Ы Ша. әбу в ы зара. вы E мег Е 


94-59 ”插入 图 像 
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图 4-60 设置 图 像 对 齐 方式 


12 ”将 光标 置 于 表格 1 的 第 2 行 单元 格 中 ， 选 择 菜单 栏 中 的 “插入 ”| “Ый” | “图 像 ” 命 令 ， 插 入 圆 角 图 像 images/bs02.gif， 如 图 4-61 所 示 。 
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图 4-61 插入 圆 角 图 像 


13 保存 文档 ， 完 成 网 页 的 制作 ， 如 图 4-48 所 示 。 


第 5 草 ”使 用 模板 和 库 批量 制作 风格 统一 的 网 页 


在 制作 网 页 时 ， 通 常 在 一 个 网 站 中 会 有 几 十 甚至 几 百 个 风格 基本 相似 的 页 面 。 如 果 每 次 都 重新 设 定 网 页 结构 以 及 相同 栏目 下 的 导航 条 、 各 类 图 标 就 会 非常 及 烦 ，Dreamweaver 的 模板 功能 简化 了 操作 。 
其 实 模板 的 功能 就 是 把 网 页 布局 和 内 容 分 离 ， 在 布局 设计 好 之 后 将 其 存储 为 模板 ， 这 样 相同 布局 的 页 面 可 以 通过 模板 创建 ， 因 此 能 够 极 大 地 提高 工作 效率 。 


本 章 重 点 
` 创建 模板 
` 创建 可 编辑 区 域 
` 使 用 模板 创建 网 页 
“ 管理 站 点 中 的 模板 


٠ 创建 与 应 用 库 项 目 


5.1 创建 模板 


网 站 内 页 的 设计 大 部 分 是 类 似 的 ， 当 制作 完 许多 内 页 后 ， 如 果 想 要 更 新 网 站 ， 一 个 一 个 地 修改 文件 显然 十 分 麻烦 。 这 时 ， 只 要 引用 模板 ， 就 可 以 轻松 构建 和 更 新 网 站 。 模 板 是 一 种 特殊 的 文档 ， 按 照 模 
板 可 以 创建 新 的 网 页 。 模 板 中 有 些 区 域 是 不 能 编辑 的 ， 称 为 锁定 区 ; 有 些 区 域 则 是 可 以 编辑 的 ， 称 为 可 编辑 区 。 通 过 编辑 可 编辑 区 的 内 容 ， 可 以 得 到 与 模板 相似 但 又 有 所 不 同 的 新 网 页 。 


5.1.1 ”新建 模板 


模板 一 般 保存 在 本 地 站 点 根 文件 夹 下 的 Templates 文 件 夹 中 。 如 果 站 点 中 没有 Templates 文 件 夹 ， 则 在 创建 新 模板 时 将 自动 创建 该 文件 夹 。 创 建 模板 有 两 种 方法 : 一 种 是 以 现 有 的 文档 创建 模板 ， 一 种 
是 从 空白 文档 创建 。 


制作 模板 和 制作 一 个 普通 的 页 面 完 全 相同 ， 但 不 需要 把 页 面 的 所 有 部 分 都 制作 完成 ,仅仅 需 要 制作 出 导航 条 、 标 题 栏 等 各 个 页 面 的 公有 部 分 ， 中 间 区 域 用 页 面 的 具体 内 容 来 填充 。 创 建 模板 的 具体 操作 
步骤 如 下 。 


01 选择 菜单 栏 中 的 “文件 ”| “新 建 ”命令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 在 对 话 框 中 选择 “ 空 百 页 ”| “HTML 模板 ”|“ 无 ”选项 ， 如 图 5-1 所 示 。 


02 #& “创建 按钮， 即 可 创建 一 个 空白 模板 网 页 ， 如 图 5-2 所 示 。 
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451 “新 建文 档 ” 对 话 框 
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452 创建 模板 
03 选择 菜单 栏 中 的 “文件 | “另存 为 ”命令 ， 弹 出 Dreamweavet 提 示 对 话 框 ， 如 图 5-3 所 示 。 


04 单 击 “ 确 定 ” 按 钮 ， 弹 出 “另存 模板 ”对 话 框 ， 在 对 话 框 中 的 “另存 为 ”文本 框 中 输入 moban.dwt， 如 图 5-4 所 示 。 单 击 “ 保 存 ” 按 钮 ， 即 可 完成 模板 的 创建 。 
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图 5-3 Dreamweaver 7F ЕЕ 


站 点 : 05 
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5-4 “另存 为 ”对 话 框 


提示 不 要 随意 移动 模板 到 Templates 文 件 夹 之 外 的 文件 夹 或 者 将 任何 非 模 板 文件 放 在 ITemplates 文 件 夹 中 。 此 外 ， 不 要 将 ITemplates 文 件 夹 移动 到 本 地 根 文件 夹 之 外 ， 以 免 引 用 模板 时 路 径 出 错 。 


5.1.2 ”从 现 有 文档 创建 模板 


如 果 要 创建 的 模板 文档 和 现 有 的 网 页 文档 相同 ， 则 可 以 将 现 有 文档 保存 成 模板 文件 ， 具 体操 作 步 又 如 下 。 


01 ”打开 要 创建 模板 的 网 页 文档 ， 如 图 5-5 所 示 。 
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5-5 ”打开 网 页 文档 
02 选择 菜单 栏 中 的 “文件 ”| “另存 为 模板 ”命令 ， 弹 出 “另存 模板 ”对 话 框 ， 在 对 话 框 中 的 “另存 为 ”文本 框 中 输入 模板 的 名 称 ， 在 “站 点 ”下 拉 列 表 中 选择 保存 的 站 点 ， 如 图 5-6 所 示 。 


03 单 击 “保存 ”按钮 ， 弹 出 如 图 5-7 所 示 的 提示 对 话 框 。 
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图 5-6 “另存 为 模板 ”对 话 框 


Dreamweaver 


5-7 提示 对 话 框 


04 单 击 “ 是 ”按钮 ， 即 可 在 站 点 的 Templates 文 件 夹 中 创建 一 个 模板 文件 ， 如 图 5-8 所 示 。 
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图 5-8 创建 模板 文件 


5.2 ”创建 可 编辑 区 域 


可 编辑 区 域 就 是 基于 模板 文档 的 未 锁定 区 域 ， 是 网 页 套用 模板 后 可 以 编辑 的 区 域 。 在 创建 模板 后 ， 模 板 的 布局 就 固定 了 。 如 果 要 在 模板 中 针对 某 些 内 容 进 行 修改 ， 即 可 为 该 内 容 创建 可 编辑 区 。 


5.21 插入 可 编辑 区 域 


创建 可 编辑 区 域 的 具体 操作 步骤 如 下 。 
01 ”打开 创建 的 模板 ， 如 图 5-9 所 示 。 


02 将 光标 置 于 页 面 中 ， 选 择 菜单 栏 中 的 “插入 ”| “йй | “可 编辑 区 域 ” 命 令 ， 弹 出 “新 建 可 编辑 区 域 ” 对 话 框 ， 在 “名 称 ” 文 本 框 中 输入 可 编辑 区 域 的 名 称 ， 如 图 5-10 所 示 。 
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图 5-9 ”打开 模板 


此 区 域 将 可 以 在 其 于 该 模板 的 文档 
中 进行 编辑 。 


图 5-10 “新 建 可 编辑 区 域 ” 对 话 框 


03 单 击 “确定 ”按钮 ， 即 可 插入 可 编辑 区 域 ， 如 图 5-11 所 示 。 
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图 5-11 创建 可 编辑 区 域 


提示 “创建 一 个 站 点 ， 保 持 统 一 的 风格 很 重要 。 风 格 主要 从 视觉 方面 来 辨别 ， 不 能 这 个 页 面 采用 黑色 ， 另 一 个 页 面 采用 黄色 ; 还 有 网 页 的 布局 结构 ， 也 不 能 这 个 页 面 结构 是 上 下 的 ， 那 个 页 面 结构 是 
右 的 ， 这 样 不 便于 网 站 的 导航 。 
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85-12 ”选择 “删除 模板 标记 ”命令 


5.22 ”删除 可 编辑 区 域 


删除 可 编辑 区 域 的 操作 步骤 如 下 : 选中 要 删除 的 可 编辑 区 域 ， 然 后 选择 菜单 栏 中 的 “修改 ”|“ 模 板 ”|“ 删 除 模板 标记 ”命令 ， 被 选中 的 可 编辑 区 域 即 被 删除 ， 如 图 5-12 所 示 。 


5.2.3 ”更 改 可 编辑 区 域 


在 使 用 了 模板 的 文档 窗口 或 打开 的 模板 窗口 中 单 击 ， 即 可 选中 该 可 编辑 区 域 。 


另外 ， 选 择 菜单 栏 中 的 “修改 ”|“ 模 板 ” 命 令 ， 在 其 子 菜单 中 选择 某 个 可 编辑 区 域名 称 ， 如 图 5-13 所 示 ， 也 可 选中 某 个 可 编辑 区 域 ， 被 选中 的 可 编辑 区 域 所 在 的 位 置 将 被 边框 包围 。 
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65-53 ”选择 可 编辑 区 域 


5.3 ”使 用 模板 创建 网 页 


模板 创建 好 之 后 ， 就 可 以 应 用 模板 快速 、 高 效 地 设计 风格 一 致 的 网 页 ， 下 面 通过 如 图 5-14 所 示 的 效果 讲述 应 用 模板 创建 网 页 ， 具 体操 作 步 又 如 下 。 
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4514 ”应 用 模板 创建 网 页 效果 
01 选择 菜单 栏 中 的 ес 文件 ” | “新 建 ” 命令 ， 弹出 “新 建文 档 ” 对 话 框 ， 在 对 话 框 中 选择 “网 站 模板 ” | “5.1.2” | “moban” ， 如 图 5-15 所 示 。 


02 单 击 “ 创 建 ” 按 钮 ， 利 用 模板 创建 网 页 ， 如 图 5-16 所 示 。 
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65-15 “新建 文档 ”对 话 框 
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4516 ”利用 模板 创建 网 页 


03 选择 菜单 栏 中 的 “文件 ”| “保存 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 在 对 话 框 中 选择 保存 的 位 置 ， 在 “文件 名 ”文本 框 中 输入 index1.htm， 如 图 5-17 所 示 。 


04 单 击 “保存 ”按钮 ， 保 存 文档 ， 将 光标 置 于 可 编辑 区 域 中 ， 选 择 菜 单 栏 中 的 “插入 ”| “DIV” 命 令 ， 弹 出 “插入 DIV” 对 话 框 ， 如 图 5-18 所 示 。 
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4517 “另存 为 ”对 话 框 


А Div 


D: 


FE css 规则 | 


4518 “插入 DIV” 对 话 框 
05 单 击 “确定 ”按钮 ， 插入 DIV 标 签 ， 如 图 5-19 所 示 。 


06 在 标签 中 输入 文字 “公司 简介 ”， 将 字体 大 小 设置 为 18， 字 体 设 置 为 “宋体 ”， 如 图 5-20 所 示 。 
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95-19 ”插入 DIV 标 签 
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8520 ”输入 文字 


07 在 标签 的 后 面 插入 DIV 标签 ， 在 标签 处 输入 文本 ， 如 图 5-21 所 示 。 


08 ”将 光标 置 于 文字 中 ， 选 择 菜 单 栏 中 的 “插入 ”| “图 像 ” |“ 图像” 命令 ， 弹 出 “选择 图 像 源 文件 对话 框 ， 在 对 话 框 中 选择 图 像 文 件 ， 如 图 5-22 所 示 。 
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5-22 “选择 图 像 源 文件 ”对 话 框 
09 单 击 “确定 ”按钮 ， 插 入 图 像 ， 如 图 5-23 所 示 。 


10 ”将 插入 的 图 像 设置 为 “ 右 对 齐 ”， 并 调整 图 像 大 小 ， 如 图 5-24 所 示 。 
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5-23 ”插入 图 像 
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4524 设置 对 齐 方式 
单 击 “保存 ”按钮 ， 保 存 文档 ， 在 浏览 器 中 预览 ， 效 果 如 图 5-14 所 示 。 
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54 ”管理 站 点 中 的 模板 


在 Dreamweaver 中 ， 用 户 可 以 对 模板 文件 进行 各 种 管理 和 操作 ， 例 如 删除 模板 和 更 改 模板 。 


5.4.1 删除 模板 


如 果 想 将 站 点 中 不 用 的 模板 删除 ， 有 具体 操作 步骤 如 下 。 
01 在 “资源 ”面板 中 ， 选 中 要 删除 的 模板 文件 。 
02 单 击 “ 资 源 ” 面 板 右 下 角 的 “删除 ”按钮 或 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “删除 ”选项 ， 如 图 5-25 所 示 。 


03 ”弹出 对 话 框 提示 是 否 要 删除 文件 ， 如 图 5-26 所 示 ， 单 击 “是 ”按钮 ， 即 可 将 模板 从 站 点 中 删除 。 


5-25 ”选择 要 删除 的 模板 


Dreamweaver 


图 5-26 提示 是 否 要 删除 文件 


提示 。 删除 模板 的 操作 实际 上 就 是 从 本 地 站 点 的 Templates 文 件 夹 中 删除 相应 的 模板 文件 ， 因 此 ， 也 可 以 直接 在 站 点 窗口 中 找到 要 删除 的 模板 文件 ， 然 后 将 之 删除 。 这 种 删除 操作 应 该 慎重 ， 因 为 文件 被 
删除 后 ， 就 无 法 恢复 了 。 


5.4.2 ”修改 模板 

有 时 候 ， 设 计 者 需要 对 模板 的 不 可 编辑 区 域 进 行 编辑 ， 例 如 添加 网 页 的 样式 或 者 要 创建 不 同形 式 的 网 页 外 观 。 模 板 修改 完毕 之 后 保存 时 ， 会 提示 是 否 对 应 用 了 该 模板 的 所 有 网 页 进行 更 新 。 下 面 用 实例 
讲述 修改 模板 并 更 新 网 页 ， 具 体操 作 步 骤 如 下 。 

01 ”打开 模板 网 页 ， 如 图 5-27 所 示 。 


02 RARR, 打开“ 属性” 面板， 在 “属性 ”面板 选择 佐 形 热点 工具 ， 如 图 5-28 所 示 。 
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65-8 ИРА ЕТА 


03 在 图 像 上 绘制 热点 区 域 并 创建 链接 ， 如 图 5-29 所 示 。 
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5-29 创建 热点 链接 
04 ”同步 又 3 可 以 绘制 其 余热 点 ， 选 择 菜 单 栏 中 的 “文件 |“ 保存 ”命令 ， 弹 出 “更 新 模板 文件 ”对 话 框 ， 提 示 是 否 更 新 ， 如 图 5-30 所 示 。 


05 单 击 “ 更 新 ”按钮 ， 弹 出 “更 新 页 面 ” 对 话 框 ， 如 图 5-31 所 示 。 
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图 5-31 “更 新 页 面 ” 对 话 框 


06 打开 利用 模板 创建 的 网 页 ， 可 以 看 到 更 新 后 的 效果 如 图 5-32 所 示 。 
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8532 更 新 后 效果 


5.5 ”创建 与 应 用 库 项 目 


使 用 Dreamweaver 的 库 ， 


5.5.1 


创建 库 项 目 


就 可 以 通过 改动 库 更 新 所 有 采用 库 的 网 页 ， 不 用 一 个 一 个 地 修改 网 页 元 素 或 者 重新 制作 网 页 。 使 用 库 比 使 用 模板 具有 更 大 的 灵活 性 。 


> 


B B БИ 1053 x 566” 


可 以 先 创建 新 的 库 项 目 ， 然 后 再 编辑 其 中 的 内 容 ， 也 可 以 将 文档 中 选中 的 内 容 作为 库 项 目 保 存 。 创 建 库 项 目的 效果 如 图 5-33 所 示 ， 具 体操 作 步 骤 如 下 。 


< 


45-33 ЖЫН 
01 选择 菜单 栏 中 的 “文件 ” |“ 新 建 ”命令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 在 对 话 框 中 选择 “空白 页 ”| “ 库 项 目 ” 选 项 ， 如 图 5-34 所 示 。 


02 单 击 “创建 ”按钮 ， 创 建 一 个 空白 的 文档 ， 如 图 5-35 所 示 。 
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5-34 “新 建文 档 ” 对 话 框 


| DW ғын BE) жы) БА нам FEO вена еще SOM ЖН) 


| 


ir 车 -二 м 
а ДЕ | Ü|" 


图 5-35 ”新 建文 档 


03 ”将 光标 置 于 页 面 中 ， 选 择 菜单 栏 中 的 “插入 ”| “表格 ”命令 ， 弹 出 “表格 ”对 话 框 ， 在 对 话 框 中 将 “ 行 数 ” 设 置 为 2，“ 列 ”设置 为 1，“ 表 格 宽度 ”设置 为 1000 像 素 ， 如 图 5-36 所 示 。 


04 单 击 “ 确 定 ” 按钮， 插入 表格 ， 如 图 5-37 所 示 。 
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图 5-37 插入 表格 
05 “将 光标 置 于 第 1 行 单元 格 中 ， 选 择 菜单 栏 中 的 “插入 ”| “Щй” | “图 像 ” 命 令 ， 弹 出 “选择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 中 选择 图 像 文件 ， 图 5-38 所 示 。 


06 Ұқ “Өл” 按钮 ， 在 网 页 中 插入 图 像 ， 如 图 5-39 所 示 。 


ЕЕ х 


T < E › 05» 551 > Images м Ü НЕ mages" в 

ІҢ” ЕЕЕ 71422 =т= ГИ 
са 此 电脑 i 

B kafi 

=! ЕН 

+ += пещмей newright gzhd righthian 

һ ë= е л мои 

Шың Тора tul 

i Windowsê OS 

= ЖИЕ (D:) 

= ЖАНН (Е) 

- tm (G) Флюзш | 
E + xuzhi xuzhiend zhaosheng SER 


ЗЕМ: | EF v| Bert (gif “jpg? jpeg" p v 
овявна | же || ms 


4538 “选择 图 像 源 文件 ”对 话 框 
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图 5-39 ”插入 图 像 


07 ”将 光标 置 于 表格 第 2 行 的 单元 格 中 ， 插 入 1 行 11 列 的 表格 ， 如 图 5-40 所 示 。 


08 在 刚 插 入 的 表格 中 ， 分 别 播 入 相应 的 图 像 ， 如 图 5-41 所 示 。 
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图 5-41 插入 图 像 


09 选择 菜单 栏 中 的 “文件 ”| “保存 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 在 对 话 框 中 的 “文件 名 ”文本 框 中 输入 top， 将 “保存 类 型 ”设置 为 ib， 如 图 5-42 所 示 。 
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5-42 “另存 为 ”对 话 框 
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45-43 创建 库 项 目 


11 保存 库 项 目 ， 在 浏览 器 中 预览 ， 效 果 如 图 5-33 所 示 。 


5.5.2 MAARE 


将 库 项 目 应 用 到 文档 ， 实 际 内 容 以 及 对 项 目的 引用 就 会 被 插入 到 文档 中 。 在 文档 中 应 用 库 项 目的 前 后 效果 如 图 5-44 和 图 5-45 所 示 ， 具 体操 作 步 又 如 下 。 
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5-44 插入 库 项 目前 效果 
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图 5-45 ”插入 库 项 目 后 效果 


01 打开 网 页 文档 ， 如 图 5-46 所 示 。 


02 打开 “资源 ”面板 ， 在 该 面板 中 选择 创建 好 的 库 文件 ， ya AN pa, 如 图 5-47 所 示 。 
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95-46 ”打开 网 页 文档 
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5-47 选择 库 文件 


03 库 文 件 即 被 插入 到 文档 中 ， 如 图 5-48 所 示 。 


04 


保存 文档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 ， 效果 如 图 5-45 所 示 。 
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5-48 插入 库 文件 
提示 ”如 果 只 想 添加 库 项 目 内 容 对 应 的 代码 ， 而 不 希望 它 作为 库 项 目 出 现 ， 则 可 以 按 住 Ctrl 键 ， 再 将 相应 的 库 项 目 从 “资源 面板 中 拖 到 文档 窗口 。 这 样 村 入 的 内 容 就 以 普通 文档 的 形式 出 现 。 


5.5.3 ”修改 库 项 目 
创建 库 项 目 后 ， 就 可 以 将 其 插入 到 其 他 网 页 中 ， 具 体操 作 步 骤 如 下 。 


01 ”打开 网 页 库 文档 ， 选 中 图 像 首 页 ， 在 “属性 ”面板 中 “链接 ”文本 框 中 输入 shouye.html， 如 图 5-49 所 示 
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02 选择 菜单 栏 中 的 “修改 ”| 
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03 单 击 “开始 ”按钮 ， 即 可 按照 提示 更 新 文件 ， 如 图 5-51 所 示 。 
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5-49 ”打开 文件 


| ZAAR PA, 打开 “更 新 页 面 ” 对 话 框 ， 如 图 5-50 所 示 。 
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“更 新 页 面 ” 对 话 框 
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图 5-51 更 新 文件 


5.6 ”技能 训 


练 


本 章 主要 讲述 了 模板 和 库 的 创建 、 管 理 和 应 用 ， 通 过 本 章 的 学 习 ， 读 者 基本 可 以 学 会 创建 模板 和 库 。 下 面 通过 两 个 实例 来 具体 讲述 创建 完整 的 模板 网 页 。 
技能 训练 1 一 一 创建 模板 


可 以 使 用 Dreamweaver 提 供 的 “模板 ”功能 ， 将 具有 相同 的 整体 布局 结构 的 页 面 制作 成 模板 。 这 样 ， 当 再 次 制作 拥有 模板 内 容 的 网 页 时 ， 就 不 需要 进行 重复 的 操作 ， 只 需 直接 使 用 它们 就 可 以 了 。 下 面 
通过 如 图 5-52 所 示 的 实例 讲述 模板 的 创建 ， 具 体操 作 步 又 如 下 。 
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4552 ”创建 模板 


1. 创 建 模板 


01 ”选择 菜单 栏 中 的 “文件 ”| “新 建 ” 命 令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 在 对 话 框 中 选择 “空白 页 ” 


02 单 击 “创建 ”按钮 ， 创 建 空白 文档 ， 如 图 5-54 所 示 。 
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“无 ,” 选项 ， 如 图 5-53 所 示 。 
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5-53 “新 建文 档 ” 对 话 框 
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图 5-54 创建 空白 文档 


03 “选择 菜单 栏 中 的 “文件 ”| “保存 ”命令 ， 弹 出 Dreamweaver 提 示 对 话 框 ， 如 图 5-55 所 示 。 


04 单 击 “确定 ”按钮 ， 弹 出 “另存 模板 ”对 话 框 ， 在 对 话 框 的 “另存 为 ”文本 框 中 输入 moban.dwt， 如 图 5-56 所 示 。 单 击 “ 保 存 ” 按 钮 ， 将 文件 保存 为 模板 。 


Dreamweaver 
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{5-55 Dreamweaver 7F ХЕ 


现存 的 模 株 : | Сой) 


图 5-56 “另存 为 ”对 话 框 


2. 制 作 顶 部 导航 


01 选择 菜单 栏 中 的 “修改 ”|“ 页 面 属性 ”命令 ， 弹 出 “页 面 属 性 ”对 话 框 ， 在 对 话 框 中 将 “上 边 距 ”“ 下 边 距 ”“ 左 边 距 ”和 “右边 距 ”设置 为 0， 单 击 “确定 ”按钮 ， 修 改 页 面 属性 ， 如 图 5-57 所 


а 
о 


02 “将 光标 置 于 页 面 中 ， 选 择 菜 单 栏 中 的 “插入 ” |“ 表格 ”命令 ， 弹 出 “表格 ”对 话 框 ， 将 “ 行 数 ” 设置 为 3)，“ 列 ”设置 为 1，“ 表 格 宽度 ”设置 为 1000 像 素 ， 如 图 5-58 所 示 。 
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4557 “页 面 属 性 ”对 话 框 


5-58 “表格 ”对 话 杠 


03 单 击 “确定 ”按钮 ， 插 入 表格 ， 此 表格 记 为 表格 1， 如 图 5-59 所 示 。 


04 “将 光标 置 于 表格 1 的 第 1 行 单元 格 中 ， 将 单元 格 的 “背景 颜色 ”设置 为 #CEBC73， 如 图 5-60 所 示 。 
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图 5-60 жавлжижте, 


05 “将 光标 置 于 表格 1 的 第 1 行 单元 格 中 ， 选 择 菜单 栏 中 的 “插入 ”| “Йй” | “图像 ”命令 ， 弹 出 “选择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 中 选择 图 像 文件 http://www.hzcourse.com/resource/readBook? 


path= /орепгеѕоџгсеѕ /геасћ_ еБооКк/ипсотртеззед/16550/ОЕВРВ/Тех/../ипарез/Баппег ре, Зе HA 5-61 MK Fo 


06 въ тях” 按钮 ， 插 入 图 像 ， 如 图 5-62 所 示 。 
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85-61 “选择 图 像 源 文件 ”对 话 框 
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5-62 ”插入 图 像 


3. 制 作 左 侧 产品 分 类 


01 ”将 光标 置 于 表格 1 的 第 2 行 单元 格 中 ， 打 开 代 码 视 图 ， 在 代码 中 输入 背景 图 像 代码 background=http://www.hzcourse.com/resource/readBook? 
path=/openresources/teach_ebook/uncompressed/16550/OEBPS/Text/../images/lm_jiange_2.gf， 如 图 5-63 所 示 。 


02 返回 设计 视图 ， 可 以 看 到 插入 的 背景 图 像 ， 如 图 5-64 示 。 
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图 5-63 ”输入 代码 
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图 5-64 插入 背景 图 像 


03 ”将 光标 置 于 背景 图 像 上 ， 插 入 1 行 2 列 的 表格 2， 如 图 5-65 所 示 。 


04 ”将 光标 置 于 表格 2 的 第 1 列 单元 格 中 ， 插 入 2 行 1 列 的 表格 3， 如 图 5-66 所 示 。 
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图 5-65 “插入 表格 2 
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95-66 46 АЖЯ3 
05 将 光标 置 于 表格 3 的 第 1 行 单元 格 中 ， 选 择 菜单 栏 中 的 “插入 ”| “表格 ”命令 ， 播 入 3 行 1 列 的 表格 ， 此 表格 记 为 表格 4， 如 图 5-67 所 示 。 


06 “光标 置 于 表格 4 的 第 1 行 单 元 格 中 ， 选 择 菜单 栏 中 的 “ 播 入 ”|“ 表 格 ” 命 令 ， 插 入 1 行 3 列 的 表格 ， 此 表格 记 为 表格 5， 如 图 5-68 所 示 。 
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图 5-67 ”插入 表格 4 
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95-68 ”插入 表格 5 


07 “将 光标 置 于 表格 5 的 第 1 列 单元 格 中 ， 选 择 菜单 栏 中 的 “插入 ”| ВЕ” | “图像” 命令 ， 插 入 图 像 http://www.hzcourse.com/resoutce/readBook? 


path= /openresources/teach_ebook/uncompressed/16550/OEBPS/Text/../images/toy_1.gif, Зе 5-69 Ff ко 
“大 小 ”设置 为 18 像 素 ，“ 颜 色 ” 设 置 为 #462300， 如 图 5-70 所 示 。 
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95-69 ”插入 图 像 
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Breeze elegant. contend itself, 
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4570 输入 文字 
09 


将 光标 置 于 表格 5 的 第 3 列 单元 格 中 ， 选 择 菜 单 栏 中 的 “插入 | 


“图 像 ” 命 令 ， 插 入 图 像 http://www.hzcourse.com/resource/readBook? 
path=/openresources/teach_ebook/uncompressed/16550/OEBPS/Text/../images/more5.gif， 如 图 5-71 所 示 


10 ”将 光标 置 于 表格 4 的 第 2 行 单元 格 ， 打 开 代 码 视 图 ， 在 代码 中 输入 背景 图 像 代码 background=http://www.hzcourse.com/resource/readBook? 
path=/openresources/teach_ebook/uncompressed/16550/OEBPS/Text/../images/index_02.jpg， 如 图 5-72 所 示 

11 返回 “设计 ” 视图， 可 以 看 到 插入 的 背景 图 像 ， 在 属性 面板 中 的 “高 ”设置 为 9， 如 图 5-73 所 示 
将 光标 置 于 表格 4 的 第 3 行 单元 格 中 ， 选 择 菜单 中 的 “插入 ”| 


12 


“表格 ”命令 ， 插 入 8 行 1 列 的 表格 ， 此 表格 记 为 表格 6， 如 图 5-74 所 示 。 
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图 5-71 插入 图 像 
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图 5-74 486 A 146 


13 “将 光标 置 于 表格 6 的 第 1 行 单元 格 中 ， 选 择 菜 单 栏 中 的 “插入 ”| А” | “AF” 命令， 插入 图 像 http://www.hzcourse.com/resource/readBook? 
path=/openresources/teach_ebook/uncompressed/16550/OEBPS/Text/../images/dot.gif， 如 图 5-75 所 示 。 


14 “将 光标 置 于 文字 的 右边 ， 输 入 相应 的 文字 ， 并 设置 字体 大 小 和 颜色 ， 如 图 5-76 所 示 。 
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5-75 ”插入 图 像 
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5-76 SA KE 


15 “将 光标 置 于 表格 6 的 第 2 行 单元 格 中 ， 选 择 菜 单 栏 中 的 “插入 ”| ВЖ” | “图像 ” 命令， 插入 图 像 http://www.hzcourse.com/resource/readBook? 


path=/openresources/teach_ebook/uncompressed/16550/OEBPS/Text/../images/BJ.jjpg， 如 图 5-77 所 示 。 


16 在 表格 6 的 其 他 单元 格 中 也 分 别 输入 相应 的 文字 ， 并 插入 图 像 ， 如 图 5-78 所 示 。 
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图 5-77 插入 图 像 
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4 制作 左 侧 滚动 公告 


01 ”将 光标 置 于 表格 3 的 第 2 行 单元 格 中 ， 选 择 菜单 栏 中 的 “插入 ”| “表格 ”命令 ， 插 入 3 行列 的 表格 ， 此 表格 记 为 表格 7， 如 图 5-79 所 示 。 


02 将 光标 置 于 表格 7 的 第 1 行 单元 格 中 ， 选 择 菜单 栏 中 的 “插入 ”| “表格 ”命令 ， 插 入 1 行 3 列 的 表格 ， 此 表格 记 为 表格 8， 如 图 5-80 所 示 。 
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Ң5-80 ”插入 表格 8 


03 “将 光标 置 于 表格 1 的 第 1 列 单元 格 中 ， 选 择 菜单 栏 中 的 “插入 ”| ВЕ” | “图像 ”命令 ， 插 入 图 像 http://www.hzcourse.com/resoutce/readBook? 
path=/openresources/teach_ebook/uncompressed/16550/OEBPS/Text/../images/toy_1.gf， 如 图 5-81 所 示 。 


04 ”将 光标 置 于 表格 5 的 第 2 列 单元 格 中 ， 输 入 相应 的 文字 ， 如 图 5-82 所 示 。 
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图 5-81 插入 图 像 
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95-82 ”输入 文字 


05 “将 光标 置 于 表格 5 的 第 3 列 单元 格 中 ， 选 择 菜单 栏 中 的 “插入 ”| ВЕ” | “图像” 命令 ， 插 入 图 像 http://www.hzcourse.com/resoutce/readBook? 
bath=/opentesoufces/teach_ebook/uncompressed/16550/OEBPSV/Text/../images/more5.gif， 如 图 5-83 所 示 。 


06 将 光标 置 于 表格 7 的 第 2 行 单元 格 中 ， 打 开 代 码 视 图 ， 在 代码 中 输入 背景 图 像 代 码 background=http://www.hzcourse.com/resoutce/readBook? 
path=/openresources/teach_ebook/uncompressed/16550/OEBPS/Text/../images/index_02.jpg， 如 图 5-84 所 示 。 
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5-83 ”插入 图 像 
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5-84 输入 代码 
07 ”返回 设计 视图 ， 可 以 看 到 插入 的 背景 图 像 ， 如 图 5-85 所 示 。 


08 ”将 光标 置 于 表格 7 的 第 3 行 单元 格 中 ， 插 入 1 行 1 列 的 表格 9， 如 图 5-86 所 示 。 
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图 5-85 ”插入 背景 图 像 
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图 5-86 ”插入 表格 9 
将 光标 置 于 表格 9 的 单元 格 中 ， 输 入 相应 的 文字 ， 如 图 5-87 所 示 。 


打开 代码 视图 ， 在 文字 前 输入 代码 ， 如 图 5-88 所 示 。 
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65-7 输入 文字 
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15-88 输入 代码 


11 ”将 光标 置 于 文字 后 面 ， 输 入 代码 </marquee>， 如 图 5-89 所 示 。 
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图 5-89 MARA 


5. 创 建 可 编辑 区 和 底部 内 容 


01 “将 光标 置 于 表格 2 的 第 2 列 单元 格 中 ， 选 择 菜单 栏 中 的 “插入 ”| “模板 对 象 ”| “可 编辑 区 域 ”命令 ， 弹 出 “新 建 可 编辑 区 域 ”对 话 框 ， 如 图 5-90 所 示 。 


此 区 域 将 可 以 在 基于 该 模 极 的 文 迷 
Фат. 


4590 “新 建 可 编辑 区 域 ” 对 话 框 
提示 ”在 给 可 编辑 区 域 命名 时 ， 可 以 使 用 单 引 号 、 双 引号 、 尖 括号 和 以。 
02 单 击 “ 确 定 ” 按钮 ， 创 建 可 编辑 区 域 ， 如 图 5-91 所 示 。 


03 ”将 光标 置 于 表格 1 的 第 3 行 单元 格 中 ， 选 择 菜 单 栏 中 的 “插入 ”| “А” | “图像 ”命令 ， 插 入 图 像 ， 如 图 5-92 所 示 。 
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65-22 ”插入 图 像 


04 保存 文档 ， 完 成 模板 的 创建 ， 效 果 如 图 5-52 所 示 。 


技能 训练 2 一 一 利用 模板 创建 网 页 


利用 模板 创建 网 页 效果 如 图 5-93 所 示 ， 具 体操 作 步 又 如 下 。 
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提示 “创建 基于 模板 的 新 文档 有 很 多 种 方法 ， 如 可 以 使 用 “资源 ”浮动 面板 ， 或 者 使 用 菜单 “文件 ”| “新 建 ” 命 
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8593 ”利用 模板 创建 网 页 效果 
01 ”选择 菜单 栏 中 的 “文件 ”| 新 建 命令， 弹出 “新 建文 档 ，” 对 话 框 ， 在 对 话 框 中 选择 “网 站 模板 | 站 点 | “5.6”|moban 选 项 ， 如 图 5-94 所 示 。 


02 单 击 “ 创 建 ”按钮 ， 利 用 模板 创建 网 页 ， 如 图 5-95 所 示 。 
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5-94 “新 建文 档 ” 对 话 框 
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4595 ”利用 模板 创建 网 页 


03 选择 菜单 栏 中 的 “文件 ”| “保存 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 在 对 话 框 中 的 “文件 名 ”中 输入 名 称 ， 如 图 5-96 所 示 。 


04 êk ЖА” 按钮 ， 保 存 文档 ， 将 光标 置 于 可 编辑 区 域 中 ， 选 择 菜单 栏 中 的 “插入 ”| “表格 ”命令 ， 插 入 3 行 1 列 的 表格 ， 如 图 5-97 所 示 。 
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5-97 插入 表格 
05 将 光标 置 于 第 1 行 表格 中 ， 选 择 菜 单 栏 中 的 “插入 ”| “表格 ”命令 ， 插 入 1 行 2 列 的 表格 ， 如 图 5-98 所 示 。 


06 “将 光标 置 于 表格 2 的 第 1 列 单元 格 中 ， 选 择 菜单 栏 中 的 “插入 ”| “图 像 ” 命 令 ， 弹 出 “选择 图 像 源 文 件 ” 对话 框 ， 在 对 话 框 中 选择 图 像 文 件 Images/roy_1.gif， 如 图 5-99 所 示 。 
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65-59 ”插入 图 像 


07 “将 光标 置 于 表格 的 第 2 列 单元 格 ， 输 入 相应 的 文字 ， 在 “属性 ”面板 中 将 “大 小 ”设置 为 20 像 素 ，“ 文 本 颜色 ”设置 为 #462300， 如 图 5-100 所 示 。 


08 ”将 光标 置 于 表格 的 第 2 行 单元 格 中 ， 打 开 代 码 视 图 ， 在 代码 中 输入 背景 图 像 background=images/index_02.jpg， 如 图 5-101 所 示 。 
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95-100 ”输入 文字 
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图 5-101 输入 代码 


09 ”返回 设计 视图 ， 可 以 看 到 插入 的 背景 图 像 ， 如 图 5-102 所 示 。 


10 ”将 光标 置 于 第 3 行 单元 格 中 ， 输 入 文字 ， 如 图 5-103 所 示 。 
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图 5-102 ”插入 背景 图 像 
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65-103 ”输入 文字 
11 ”将 光标 置 于 相应 的 位 置 ， 选 择 菜单 栏 中 的 “插入 ”| “AF | “图像 ”命令 ， 插 入 图 像 images/tu.gif， 如 图 5-104 所 示 。 


12 ”选择 图 像 文件 ， 将 图 像 对 齐 方 式 设置 为 “ 右 对 齐 ”， 如 图 5-105 所 示 。 
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13 ”保存 文档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 ， 效 果 如 图 5-93 所 示 。 


第 6 草 ”使 用 CSS+DIV 布 局 网 页 


设计 网 页 的 第 一 步 是 设计 布局 ， 好 的 网 页 布局 会 令 访问 者 耳目 一 新 ， 同 样 也 可 以 使 访问 者 比较 容易 在 站 点 上 找到 他 们 所 需要 的 信息 。CSS + DIV 是 网 站 标准 中 常用 的 术语 之 一 ，CSS 和 DIV 的 结构 被 越 来 
越 多 的 人 采用 ， 很 多 人 都 抛弃 了 表格 而 使 用 CSS 来 布局 页 面 ， 它 可 以 使 结构 简洁 ， 定 位 更 灵活 ，CSS 布 局 的 最 终 目的 是 搭建 完善 的 页 面 架构 。 利 用 CSS 排 版 的 页 面 ， 更 新 起 来 十 分 容易 ， 甚 至 连 页 面 的 结构 都 
可 以 通过 修改 CSS 属 性 来 重新 定位 。 


本 章 重点 
- DIV 概述 
` 为 什么 使 用 CSS+DIV 布 局 
CSS 布局 方法 


.常见 的 布局 类 型 


61 初 识 DIV 


在 CSS 布 局 的 网 页 中 ，<div> 与 <Span> 都 是 常用 的 标记 ， 利 用 这 两 个 标记 ， 加 上 CSS 对 其 样式 的 控制 ， 可 以 很 方便 地 实现 网 页 的 布局 。 


6.1.1 什么 是 Web 标 准 


Web 标 准 是 由 W3C 和 其 他 标准 化 组 织 制定 的 一 套 规 学 集合 ，Web 标 准 的 目的 在 于 创建 一 个 统一 的 用 于 Web 表 现 层 的 技术 标准 ， 以 便于 通过 不 同 浏览 器 或 终端 设备 向 最 终 用 户 展示 信息 内 容 。 


网 页 主要 由 三 部 分 组 成 : 结构 (Structure) 、 表 现 (Presentation) 和 行为 (Behavior) 。 对 应 的 网 站 标准 也 分 三 方面 : 结构 化 标准 语言 ， 主 要 包括 XHTML 和 XML; 表现 标准 语言 主要 包括 CSS; {т 
为 标准 主要 包括 对 象 模 型 (如 W3C DOM) 、ECMAScript 等 。 


1. 结 构 (Structure) 


结构 是 对 网 页 中 用 到 的 信息 进行 分 类 与 整理 ， 在 结构 中 用 到 的 技术 主要 包括 HTML、XML 和 XHTML。 


2. 表 现 (Presentation) 


表现 用 于 对 信息 进行 版 式 、 颜 色 、 大 小 等 形式 控制 ， 在 表现 中 用 到 的 技术 主要 是 CSS 层 区 样式 表 。 


3. 行 为 (Behavior) 
行为 是 指 文 档 内 部 的 模型 定义 及 交互 行为 的 编写 ， 用 于 编写 交互 式 的 文档 。 在 行为 中 用 到 的 技术 主要 包括 DOM 和 ECMAScript。 
. РОМ (Document Object Model) 文档 对 象 模型 
DOM 是 浏览 器 与 内 容 结构 之 间 的 沟通 接口 ， 使 你 可 以 访问 页 面 上 的 标准 组 件 。 
. ECMAScript KÈ 


ECMAScript 是 标准 脚本 语言 ， 用 于 实现 具体 的 界面 上 对 象 的 交互 操作 。 


6.1.2 DIV 概述 


过 去 最 常用 的 网 页 布局 工具 是 <table> 标 签 ， 它 本 是 用 来 创建 电子 数据 表 的 ， 由 于 <table> 标 签 本 来 不 是 用 于 布局 的 ， 因 此 设计 师 们 不 得 不 经 常 以 各 种 不 寻常 的 方式 来 使 用 这 个 标签 ， 如 把 一 个 表格 放 
在 另 一 个 表格 的 单元 里 面 。 这 种 方法 的 工作 量 很 大 ， 增 加 了 大 量 额 外 的 HTML 代 码 ， 并 使 得 后 面 要 修改 设计 很 难 。 

而 CSs 的 出 现 使 得 网 页 布局 有 了 新 的 电光。 利用 CSs 属 性 ， 可 以 精确 地 设 定 元 素 的 位 置 ， 还 能 将 定位 的 元 素 严 放 在 彼此 之 上 。 当 使 用 CSs 布 局 时 ， 主 要 把 它 用 在 DIV 标签 上 ，<div> 与 </div> 之 间 相 当 于 
一 个 容器 ， 可 以 放置 段落 、 表 格 、 图 片 等 各 种 HTML 元 素 。 


DIV 是 用 来 为 HTML 文 档 内 大 块 的 内 容 提 供 结 构 和 背景 的 元 素 。DIV 的 起 始 标签 和 结束 标签 之 间 的 所 有 内 容 都 是 用 来 构成 这 个 块 的 ， 其 中 所 包含 元 素 的 特性 由 DIV 标 签 的 属性 ， 或 通过 使 用 CSS 来 控制 |。 
下 面 列 出 一 个 简单 的 实例 讲述 DIV 的 使 用 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>DIV 的 简单 使 用 </title> 
<style type="text/css"> 


<1== 

divt{ 
font-size:26px; // 字号 大 小 
font-weight :ро1а; // 字体 粗细 
Font-family:Arial; // 字体 
color:#330000; // 颜色 
background-color:#66CC00; // 背景 颜色 
text-align:center; // 对 齐 方式 
width:400px; // 块 宽度 
height:80px; // Жак 

) 

--> 

</style> 

</head> 

<body> 
<div> 这 是 一 个 DIV 的 简单 使 用 </div> 

</body> 

</html> 


在 上 面 的 实例 中 ， 通 过 Css 对 DIV 的 控制 ， 制 作 了 一 个 宽 400 像 素 和 高 80 像 素 的 绿色 块 ， 并 设置 了 文字 的 颜色 、 字 号 和 文字 的 对 齐 方式 ， 在 |E 中 浏览 时 的 效果 如 图 6-1 所 示 。 
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86-1 DIV 的 简单 使 用 


6.1.3 CSS+DIV 布 局 优点 
掌握 基于 CSS 的 网 页 布局 方式 ， 是 实现 Web 标 准 的 基础 。 在 网 页 制作 时 采用 CSs 技 术 ， 可 以 有 效 地 对 页 面 的 布局 、 字 体 、 颜 色 、 背 景 和 其 他 效果 进行 控制 。 只 要 对 相应 的 代码 做 一 些 简 单 的 修改 ， 就 可 
以 改变 网 页 的 外 观 和 格式 。 采 用 CSS 有 以 下 优点 : 
大 大 缩减 了 页 面 代 码 ， 提 高 页 面 浏览 速度 ， 缩 减 带宽 成 本 。 
' 结构 清晰 ， 容 易 被 搜索 引擎 搜索 到 。 
. 缩短 改版 时 间 ， 只 要 简单 地 修改 几 个 CSS 文 件 就 可 以 重新 设计 一 个 有 成 百 上 千 页 面 的 站 点 。 
` 强大 的 字体 控制 和 排版 能 力 ， 使 页 面 的 字体 变 得 更 漂亮 ， 且 便于 编排 。 
` 提高 易 用 性 ， 使 用 CSS 可 以 结构 化 HIML， 如 <p> 标 记 只 用 来 控制 段落 ，<heading> 标 记 只 用 来 控制 标题 ，table 标 记 只 用 来 表现 格式 化 的 数据 等 。 
` 表现 和 内 容 相 分 离 ， 将 设计 部 分 分 离 出 来 放 在 一 个 独立 样式 文件 中 。 
- <table> 布 局 灵活 性 不 大 ， 只 能 遵循 <table>、<tt>、<td> 的 格式 ， 而 DIV 可 以 有 各 种 格式 。 
- 在 <table> 中 布局 ， 垃 圾 代码 会 很 多 ， 一 些 修饰 的 样式 及 布局 的 代码 混合 一 起 ， 很 不 直观 。DIV 更 能 体现 样式 和 结构 相 分 离 ， 结 构 的 重 构 性 强 。 
- 以 前 必须 要 通过 图 片 转换 才能 实现 的 功能 ， 现 在 只 要 用 CSS 就 可 以 轻松 实现 ， 从 而 更 快 地 下 载 页面 。 


` 可 以 将 许多 网 页 的 风格 格式 同时 更 新 。 可 以 将 站 点 上 所 有 的 网 页 风格 都 使 用 一 个 CSS 文 件 进行 控制 ， 只 要 修改 这 个 CSS 文 件 中 相应 的 行 ， 整 个 站 点 的 所 有 页 面 都 会 随 之 发 生变 动 。 


62 ”CSS 布局 方法 


无 论 使 用 表格 还 是 CSS$， 网 页 布局 都 是 把 大 块 的 内 容 放 进 网 页 的 不 同 区 域 里 面 。 有 了 CSS， 最 常用 来 组 织 内 容 的 元 素 就 是 <div> 标 签 。CSS 排 版 是 一 种 很 新 的 排版 理念 ， 首 先 要 使 用 <div> 将 页 面 整 体 划 
分 几 个 板块 ， 然 后 对 各 个 板块 进行 CSS 定 位 ， 最 后 在 各 个 板块 中 添加 相应 的 内 容 。 


6.2.1 将 页 面 用 DIV 分 块 


在 利用 CSs 布 局 页 面 时 ， 首 先 要 有 一 个 整体 的 规划 ， 包 括 将 整个 页 面 分 成 哪些 模块 ， 各 个 模块 之 间 的 父子 级 关系 等 。 以 最 简单 的 框架 为 例 ， 页 面 由 导航 条 (Banner) 、 主 体内 容 (content), KAS 
Вл, (links) 和 脚注 (footer) 几 个 部 分 组 成 ， 各 个 部 分 用 各 自 的 id 来 标识 ， 如 图 6-2 所 示 。 


container 


banner 


cont ету 


footer 
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其 页 面 中 的 HTML 框 架 代 码 如 下 所 示 。 


<div id="container">container 
<div id="banner">banner</div> 
<div id="content">content</div> 


<div id="links">links</div> 
<div id="footer">footer</div> 
</div> 


实例 中 每 个 板块 都 是 一 个 <div> ， 这 里 直接 使 用 CSs 中 的 id 来 表示 各 个 板块 ， 页 面 的 所 有 DIV 块 都 属于 container， 一 般 的 DIV 排版 都 会 在 最 外 面 加 上 这 个 父 DIV， 便 于 对 页 面 的 整体 进行 调整 。 对 于 每 个 
DIV 块 ， 还 可 以 再 加 入 各 种 元 素 或 行内 元 素 。 


6.2.2 ”用 CSS 定 位 各 块 的 位 置 


当 页 面 的 内 容 已 经 确定 后 ， 则 需要 根据 内 容 本 身 考 虑 整体 的 页 面 布局 类 型 ， 如 是 单 栏 、 双 栏 还 是 三 栏 等 ， 这 里 采用 的 布局 如 图 6-3 所 示 。 
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图 6-3 简单 的 页 面 框架 


由 图 6-3 可 以 看 出 ， 在 页 面 外 部 有 一 个 整体 的 框架 container，banner 位 于 页 面 整 体 框架 中 的 最 上 方 ，content 与 links 位 于 页 面 的 中 部 ， 其 中 content 占 据 着 页 面 的 绝 大 部 分 ， 最 下 面 是 页 面 的 脚注 


footer, 
整理 好 页 面 的 框架 后 ， 就 可 以 利用 CSS 对 各 个 板块 进行 定位 ， 实 现 对 页 面 的 整体 规划 ， 然 后 再 往 各 个 板块 中 添加 内 容 。 
下 面 首先 对 body 标记 与 container 父 块 进行 设置 ，CSS 代 码 如 下 所 示 : 


body ( 
margin:10px; 
text-align:center; 

} 

#container { 
width: 800px; 
border:lpx solid #000000; 
padding: 10px; 

} 


上 面 代码 设置 了 页 面 的 边界 、 页 面 文本 的 对 齐 方 式 ， 以 及 父 块 的 宽度 为 800 像 素 。 下 面 来 设置 banner 板 块 ， 其 CSS 代 码 如 下 所 示 : 


#banner { 
margin-bottom: 5px; 
padding : 10px; 
background-color :#a2d9ff; 
border:lpx solid #000000; 
text-align :center; 


这 里 设置 了 banner 板 块 的 边界 、 填 充 、 背 景 颜 色 等 。 


下 面 利用 float 方 法 将 content 移 动 到 左 侧 ，links 移 动 到 页 面 右 侧 ， 这 里 分 别 设 置 了 这 两 个 板块 的 宽度 和 高 度 ， 读 者 可 以 根据 需要 自己 调整 。 


#content { 

float:left; 

width: 560px; 
height : 300px; 

border:lpx solid #000000; 
text-align:center; 


} 
#links{ 
float:right; 

width:200px; 
height : 300px; 

рогаег:1рх solid #000000; 
text-align:center; 


} 


由 于 content 和 links 对 象 都 设置 了 浮动 属性 ， 因 此 ，footer 需 要 设置 clear 属 性 ， 使 其 不 受 浮动 的 影响 ， 代 码 如 下 所 示 。 


#footer { 

clear:both; /* 不 受 float 影 响 */ 
padding: 10px; 
border:lpx solid #000000; 
text-align:center; 


) 


--> 


这 样 ， 页 面 的 整体 框架 便 搭建 好 了 。 需 要 注意 的 是 ，content 块 中 不 能 放宽 度 太 长 的 元 素 ， 如 很 长 的 图 片 或 不 折 行 的 英文 等 ， 否 则 links 将 再 次 被 挤 到 content 下 方 。 
特别 提出 的 是 ， 如 果 后 期 维护 时 希望 content 的 位 置 与 links 对 调 ， 仪 仪 只 需要 将 content 和 links 属 性 中 的 left 和 right 改 变 。 这 是 传统 的 排版 方式 所 不 可 能 简单 实现 的 ， 也 正 是 CSSs 排 版 的 魅力 之 一 。 


另外 ， 如 果 links 的 内 容 比 content 的 长 ， 在 IE 浏览 器 上 footer 就 会 贴 在 content 下 方 而 与 links 出 现 重 合 。 


63 ”常见 的 布局 类 型 


DIV+CSS 是 现在 最 流行 的 一 种 网 页 布局 格式 ， 以 前 常用 表格 来 布局 ， 而 现在 比较 知名 的 网 页 设计 全 部 采用 的 是 DIV+CSS 来 排版 布局 。DIV+CSS 的 好 处 可 以 使 HTML 代 码 更 整齐 、 更 容易 被 人 理解 ， 而 
且 在 浏览 时 的 速度 也 比 传统 的 布局 方式 快 ， 最 重要 的 是 它 的 可 控 性 要 比 表格 强 得 多 。 下 面 介绍 常见 的 布局 类 型 。 


6.3.1 单行 单列 固定 宽度 


单行 单列 固定 宽度 也 就 是 一 列 固 定 宽度 布局 ， 它 是 所 有 布局 的 基础 ， 也 是 最 简单 的 布局 形式 。 一 列 固定 宽度 中 ， 宽 度 的 属性 值 是 固定 像素 。 下 面 举 例 说 明 单 行 单列 固定 宽度 的 布局 方法 ， 具 体 步 骤 如 
Т. 


01 在 HITML 文 档 的 <head> 与 </head> 之 间 相 应 的 位 置 输入 定义 的 CSS 样 式 代 码 ， 如 下 所 示 : 


<style> 

#content { 
backoround-color:#ffcc33; 
border:5px solid #ff3399; 
width:500px; 
height:350px; 


) 
</style> 


提示 使 用 backgtround-color: ##ffcc33 将 DIV 设 定 为 黄色 背景 ， 并 使 用 bordet: 5px solid#ff3399 将 DIV 设置 了 粉红 色 的 5px 宽 度 的 边框 ， 使 用 width: 500px 设 置 宽度 为 500 像 素 固定 宽度 ， 使 用 height: 350рк 
置 高 度 为 350 像 素 。 

02 在 HTMIL 文 档 <body> 与 </body> 之 间 的 正文 中 输入 以 下 代码 ， 给 DIV 使 用 了 layer 作 为 id 名 称 。 
<div id="content ">1 列 固定 宽度 </div> 
03 ”在 浏览 器 中 浏览 ， 由 于 是 


固定 宽度 ， 无 论 怎么 改变 浏览 器 窗口 大 小 ，DIV 的 宽度 都 不 改变 ， 如 图 6-4 和 图 6-5 所 示 。 
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图 6-5 浏览 器 窗口 变 大 效果 


提示 页 面 居 中 是 常用 的 网 页 设计 表现 形式 之 一 。 在 传统 的 表格 式 布局 中 ， 用 align="centet" 属 性 来 实现 表格 居中 显示 。DIV 本 身 也 支持 align='"centet" 必 性， 同样 可 以 实现 居中 ， 但 是 在 Web 标 准 化 时 代 ， 
这 个 不 是 我 们 想 要 的 结果 ， 因 为 不 能 实现 表现 与 内 容 的 分 


6.3.2 一 列 自 适应 


自 适 应 布局 是 在 网 页 设计 中 常见 的 一 种 布局 形式 ， 自 适应 的 布局 能 够 根据 浏览 器 窗口 的 大 小 ， 自 动 改 变 其 宽度 或 高 度 值 ， 是 一 种 非常 灵活 的 布局 形式 ， 良 好 的 自 适应 布局 网 站 对 不 同 分 辨 率 的 显示 器 都 
能 提供 最 好 的 显示 效果 。 自 适应 布局 需要 将 宽度 由 固定 值 改 为 百分比 。 下 面 是 一 列 自 适应 布局 的 Cs 代码 : 


<html xmlns="http://www.w3.orog/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"/> 
<title>1 列 自 适 应 </title> 
<style> 
#Layer { 
background-color :#00cc33; 
border: 3px solid #ff3399; 
width: 60%; 
height : 60%; 


} 

</style> 

</head> 

<body> 

<div id="Layer">1 列 自 适应 </div> 
</body> 

</html> 


这 里 将 宽度 和 高 度 值 都 设置 为 60%， 从 浏览 效果 中 可 以 看 到 ，DIV 的 宽度 已 经 变 为 了 浏览 器 宽度 60% 的 值 ， 当 扩大 或 缩小 浏览 器 窗口 大 小 时 ， 其 宽度 和 高 度 还 将 维持 在 与 浏览 器 当前 宽度 比例 的 60%， 
如 图 6-6 和 图 6-7 所 示 。 
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自 适 应 布局 是 比较 常见 的 网 页 布局 方式 ， 如 图 6-8 所 示 的 网 页 采用 的 就 是 自 适 应 布局 。 
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468 自 适 应 布局 


633 ”两 列 固定 宽度 


有 了 一 列 固 定 宽度 作为 基础 ， 两 列 固定 宽度 就 非常 简单 。 我 们 知道 DIV 是 用 于 对 某 一 个 区 域 的 标识 ， 因 此 ， 列 的 布局 自然 需要 用 到 两 个 DIV。 


两 列 固定 宽度 非常 简单 ， 两 列 的 布局 需要 用 到 两 个 DIV， 分 别 把 两 个 DIV 的 id 设置 为 left 与 right， 表 示 两 个 DIV 的 名 称 。 首 先 为 它们 设置 宽度 ， 然 后 让 两 个 DIV 在 水 平 线 中 并 排 显示 ， 从 而 形成 两 列 式 布 
局 ， 具 体 步骤 如 下 。 


01 ”在 HTMI 文 档 的 <head> 与 </head> 之 间 相 应 的 位 置 输入 定义 的 CSS 样 式 代 码 ， 如 下 所 示 : 


<style> 
#left( 


backoround-color:#00cc33; 
border:lpx solid #ff3399; 
width:250px; 
height:250px; 
float:left; 
} 

#right( 
backoround-color:#ffcc33; 
border:lpx solid #ff3399; 


width:250px; 
height:250px; 
float:left; 

} 

</style> 


提示 left 与 fight 两 个 DIV 的 代码 与 前 面 类 似 ， 两 个 DIV 使 用 相同 宽度 实现 两 列 式 布局 。float 属 性 是 CSS 布 局 中 非常 重要 的 属性 ， 用 于 控制 对 象 的 浮动 布局 方式 ， 大 部 分 DIV 布局 基本 上 都 通过 float 的 控制 
来 实现 的 。float 使 用 none 值 时 表示 对 象 不 浮动 ， 而 使 用 left 时 ， 对 象 将 向 左 浮动 ， 例 如 本 例 中 的 DIV 使 用 了 float: left; 之 后 ，DIV 对 象 将 向 左 浮动 。 


02 ”在 HTML 文档 的 <body> 与 </body> 之 间 的 正文 中 输入 以 下 代码 ， 给 DIV 使 用 left 和 tight 作 为 id 名 称 。 


<div id="left"> 左 列 </div> 
<div id="right"> 右 列 </div> 


03 在 使 用 了 简单 的 float 属 性 之 后 ， 两 列 固定 宽度 就 能 够 完整 地 显示 出 来 了 。 在 浏览 器 中 浏览 ， 如 图 6-9 所 示 为 两 列 固定 宽度 布局 。 
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图 6-9 ”两 列 固定 宽度 布局 


6.3.4 两 列 宽 度 自 适应 


下 面 使 用 两 列 宽 度 自 适 应 布局 ， 来 实现 左右 栏 宽 度 能 够 做 到 自动 适应 ， 设 置 自 适 应 主要 通过 宽度 的 百分比 值 设 置 。CSs 代 码 修改 为 如 下 : 


<style> 
#left{ Dbackground-color:#00cc33;border:lpx solid #ЕЕ3399; width: 60%; 
height:250px; float:left; } 
#right(background-color:#ffcc33;border:lpx solid #ЕЕ3399; width:30%; 
йе ж } 


height:250px; float:lef 
</style> 


= ді 


这 里 主要 修改 了 左 栏 宽 度 为 60%， 右 栏 宽 度 为 30%。 在 浏览 器 中 浏览 效果 如 图 6-10 和 图 6-11 所 示 ， 无 论 怎 样 改变 浏览 器 窗口 大 小 ， 左 右 两 栏 的 宽度 与 浏览 器 窗口 的 百分比 都 不 改变 。 
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461 浏览 器 窗口 变 大 效果 


6.3.5 ”三 列 浮动 中 间 宽 度 自 适 应 
使 用 浮动 定位 方式 ， 从 一 列 到 多 列 的 固定 宽度 及 自 适 应 ， 基 本 上 可 以 简单 完成 ， 包 括 三 列 的 固定 宽度 。 这 里 给 我 们 提出 了 一 个 新 的 要 求 ， 希 望 有 一 个 三 列 式 布 局 ， 其 中 左 栏 要 求 固定 宽度 ， 并 居 左 显 
示 ， 右 栏 要 求 固定 宽度 并 居 右 显示 ， 而 中 间 栏 需要 在 左 栏 和 右 栏 的 中 间 ， 根 据 左右 栏 的 间距 变化 自动 适应 。 


在 开始 这 样 的 三 列 布局 之 前 ， 有 必要 了 解 一 个 新 的 定位 方式 一 一 绝对 定位 。 前 面 的 浮动 定位 方式 主要 由 浏览 器 根据 对 象 的 内 容 自动 进行 浮动 方向 的 调整 ， 但 是 这 种 方式 不 能 满足 定位 需求 时 ， 就 需要 新 
的 方法 来 实现 ，CSS 提 供 的 除去 浮动 定位 之 外 的 另 一 种 定位 方式 就 是 绝对 定位 ， 绝 对 定位 使 用 position 属 性 来 实现 。 


下 面 讲述 三 列 浮动 中 间 宽 度 自 适 应 布局 的 创建 ， 具 体操 作 步 又 如 下 。 


01 在 HIML 文 档 的 <head> 与 </head> 之 间 相 应 的 位 置 输入 定义 的 CSS 样 式 代码 ， 如 下 所 示 : 


<style> 

body{ margin:0px; } 

#left{ background-color:#ffcc00; border:3px solid #333333; width:100px; 
height:250px; position:absolute; top:0px; left:0px; 

] 

#center{ background-color:#ccffcc; border:3px solid #333333; height:250px; 
margin-left:100px; margin-right:100px; } 

#right{ background-color:#ffcc00; border:3px solid #333333; width:100px; 
height:250px; position:absolute; right:0px; top:0px; } 

</style> 


02 ”在 HTMIL 文 档 <body> 与 </body> 之 间 的 正文 中 输入 以 下 代码 ， 给 DIV 使 用 left、tright 和 center 作 为 id 名 称 。 


<div id="left"> 左 列 </div> 
<div id="center"> 中 间 列 </div> 
<div id="right"> 右 列 </div> 


03 ”进入 浏览 器 中 浏览 ， 效 果 如 图 6-12 和 图 6-13 所 示 。 
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图 6-13 中 间 宽 度 自 适应 2 
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第 7 章 ”使 用 行为 设计 动感 特效 网 页 
行为 是 Dreamweaver 中 制作 绚丽 网 页 的 利器 ， 它 功能 强大 ， 颇 受 网 页 设计 者 的 喜爱 。 行 为 是 一 系列 使 用 Javascript 程 序 预定 义 的 页 面 特效 工具 ， 是 Javascript 在 Dreamweaver 中 内 置 的 程序 库 。 在 
Dreamweaver 中 ， 利 用 行为 可 以 为 页 面 制作 出 各 种 各 样 的 特殊 效果 ， 如 打开 浏览 器 窗口 、 弹 出 信息 、 交 换 图 像 等 网 页 特殊 效果 。 
本 章 重 点 
了解 动 作 和 事件 


. 行为 的 添加 与 编辑 


` 使 用 Dteamweavet 内 置 行为 


71 了 和 解 动作 和 事件 


在 Dreamweaver 中 ， 行 为 是 事件 和 动作 的 组 合 。 事 件 是 特定 的 时 间或 是 用 户 在 某 时 所 发 出 的 指令 后 紧 接 着 发 生 的 ， 而 动作 是 事件 发 生 后 ， 网 页 所 要 做 出 的 反应 。 


7.1.1 动作 


所 谓 的 动作 就 是 设置 交换 图 像 、 弹 出 信息 等 特殊 的 Javascript 效 果 。 在 设 定 的 事件 发 生 时 运行 动作 。 表 7-1 是 Dreamweaver 中 默认 提供 的 动作 种 类 。 


Ж7-1 Drteamweavet 中 常见 的 动作 


弹出 消息 
交换 图 像 
恢复 交换 图 像 


FI FAN RÊ а 
拖 动 AP 元 素 


转 到 URL 
调用 JavaScript 


改变 属性 


设置 的 事件 发 生 之 后 ， 显 示警 告 信息 
友 生 设置 的 事件 后 ， 用 其 他 图 三 来 取代 选 定 的 图 片 
在 运用 交换 图 像 动作 之 后 ， 显 示 原 来 的 图 片 

在 新 窗口 中 打开 

允许 在 浏览 疮 中 目 由 拖 动 AP жж 

可 以 转 到 特定 的 站 点 或 者 网 页 文档 上 

检查 表单 文档 有 效 性 的 时 候 使 用 

调用 JavaScript 特定 函数 

改变 选 定 元 条 的 属性 

可 以 建立 各 干 个 链接 的 跳 转 荣 单 


DEEE U аш; 在 跳 转 菜单 中 选 定 要 移动 的 站 点 之 后 ， 只 有 单 击 按钮 才 可 以 移动 到 链接 的 站 点 上 
MAERA BNS Л TENA е Взе АН, Ж FRR шух 
W NEAS V K 在 选 定 的 框架 上 显示 指定 的 内 容 
设置 文本 域 文字 在 文本 字段 区 域 显示 指定 的 内 容 
КЕЛЕЙІН y K 在 选 定 的 容器 上 显示 指定 的 内 容 
设置 状态 栏 文本 在 状态 栏 中 显示 指定 的 内 容 
7.1.2 事件 
事件 就 是 选择 在 特定 情况 下 发 生 选 定 行为 动作 的 功能 。 例 如 ， 运 用 了 单 击 图 片 之 后 转移 到 特定 站 点 上 的 行为 ， 是 因为 事件 被 指定 了 onClick， 所 以 执行 了 在 单 击 图 片 的 一 瞬间 转移 到 其 他 站 点 。 表 7-2 所 


示 为 Dreamweaver 中 常见 的 事件 。 


onA bort 


onMove 


onLoad 


Ж7-2 Dreamweavet 中 常见 的 事件 


在 浏览 器 窗口 中 停止 加 载 网 页 文档 的 操作 时 发 生 的 事件 
移动 窗口 或 者 框架 时 一 


选 定 的 对 象 出 现在 浏览 器 上 时 发 生 的 事件 


GER) 


访问 者 改变 窗口 或 帧 的 大 小 时 发 生 的 事件 

访问 者 退出 网 页 文档 时 发 生 的 事件 

用 鼠标 单 击 选 定 元 素 的 一 瞬间 发 生 的 事件 

鼠标 指针 移动 到 窗口 或 帧 外 部 ， 即 在 这 种 非 激活 状态 下 发 生 的 事件 
拖 动 并 放置 选 定 元 素 的 那 一 瞬间 发 生 的 事件 

拖 动 选 定 元 素 的 那 一 瞬间 发 生 的 事件 

鼠标 指针 移动 到 窗口 或 帆 上 ， 即 激活 之 后 发 生 的 事件 


onMouseDown 单 击 鼠 标 右键 一 瞬间 发 生 的 事件 
onMouseMove 鼠标 指针 指向 字段 并 在 字段 内 移动 


鼠标 指针 经 过 选 定 元 素 之 外 时 发 生 的 事件 

鼠标 指针 经 过 选 定 元 素 上 方 时 发 生 的 事件 

单 击 鼠 标 右键 ， 然 后 释放 时 发 生 的 事件 

访问 者 在 浏览 器 上 移动 滚动 条 的 时 候 发 生 的 事件 

当 访问 者 按 下 任意 键 时 产生 

当 访 问 者 按 下 和 释放 任意 键 时 产生 

在 键盘 上 按 下 特定 键 并 释放 时 发 生 的 事件 
onAfterUpdate 更 新 表单 文档 内 容 时 发 生 的 事件 
onBeforeUpdate 改变 表单 文档 项 目 时 发 生 的 事件 

访问 者 修改 表单 文档 的 初始 值 时 发 生 的 事件 

将 表单 文档 重 设置 为 初始 值 时 发 生 的 事件 
onSubmit 访问 痢 传送 表单 文档 时 发 生 的 事件 

访问 者 选 定 文本 字段 中 的 内 容 时 发 生 的 事件 

在 加 载 文 档 的 过 程 中 ， 发 生 错误 时 发 生 的 事件 
onFilterChange 运用 于 选 定 元 素 的 字段 发 生变 化 时 发 生 的 事件 
Onfinish Marquee 用 功能 来 显示 的 内 容 结束 时 发 生 的 事件 
Onstart Marquee 开始 应 用 功能 时 发 生 的 事件 


72 行为 的 添加 与 编辑 


通过 行为 的 应 用 ， 可 在 网 页 设计 中 加 入 具有 互动 性 质 的 效果 。 本 节 介绍 网 页 行为 的 添加 、 修 改 等 操作 方法 。 


7.2.1 行为 的 添加 


在 网 页 中 选取 所 需 的 内 容 ， 例 如 文本 、 图 像 、AP 元 素 等 ， 然 后 打开 “行为 ”面板 ， 即 可 为 所 选 的 网 页 内 容 添加 行为 ， 最 后 通过 设置 事件 ， 即 可 让 行为 的 动作 因为 事件 的 触发 而 产生 相应 的 效果 。 
添加 行为 的 具体 操作 步骤 如 下 。 

01 在 编辑 窗口 中 ， 选 择 要 增加 行为 的 对 象 元 素 ， 在 编辑 窗口 中 选择 元 素 ， 或 者 在 编辑 窗口 底部 的 标签 选择 器 中 单 击 相应 的 页 面 元 素 标签 ， 例 如 <body>。 

02 单 者 “行为 ”面板 中 的 添加 行为 按钮 “”， 在 打开 的 行为 菜单 中 选择 一 种 行为 。 

03 ”选择 行为 后 ， 一 般 会 打开 一 个 参数 设置 对 话 框 ， 根 据 需 要 设置 完成 。 


04 单 击 “ 确 定 ” 按 钮 ,在 “行为 ”面板 的 列表 中 显示 添加 的 事件 及 对 应 的 动作 。 


05 “如 果 要 设置 其 他 的 触发 事件 ， 可 单 击 事件 列表 右边 的 下 拉 箭 头 ， 打 开 事 件 下 拉 菜 单 ， 从 中 选择 一 个 需要 的 事件 。 


7.2.2 行为 的 修 以 


кт 


在 附加 了 行为 之 后 ， 可 以 更 改 触发 动作 的 事件 、 添 加 或 删除 动作 以 及 更 改动 作 的 参数 。 其 步骤 如 下 。 
01 选择 一 个 附加 有 行为 的 对 象 。 


02 ”选择 菜单 栏 中 的 “窗口 ”| “行为 ”命令 ， 打 开 “ 行 为 ”面板 ， 若 要 编辑 动作 的 参数 ， 双 击 动作 的 名 称 或 将 其 选中 并 按 Enter (Windows) 或 Return (Мас) 键 ; 然后 更 改 对 话 框 中 的 参数 并 单 击 “ 确 
”按钮 。 
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7.3 使 用 Dreamweaver 内 置 行 为 


在 Dreamweaver CC 中 ， 无 须 编写 触发 事件 及 动作 脚本 代码 ， 直 接 利用 Dreamweaver CC“ 行 为 ”面板 中 的 各 项 设置 ， 就 可 以 轻松 实现 丰富 的 动态 页 面 效果 ， 达 到 用 户 与 页 面 交互 的 目的 。 


下 面 通过 实例 讲述 “交换 图 像 ”行为 的 使 用 方法 ， 当 鼠标 未 经 过 图 像 时 的 效果 如 图 7-1 所 示 ， 当 鼠标 经 过 图 像 时 的 效果 如 图 7-2 所 示 ， 具 体操 作 步 骤 如 下 。 
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8671 和 鼠标 未 经 过 图 像 时 的 效果 
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01 打开 网 页 文档 ， 选 中 图 像 ， 如 图 7-3 所 示 。 
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2 ”选择 菜单 栏 中 的 “窗口 ”|“ 行 为” 命令， 打开 “行为 ”面板 ,在 “行为 ”面板 中 单 击 “ 添 加 行为 ”按钮 ， 在 弹出 的 菜单 中 选择 “交换 图 像 ” 选 项 ， 如 图 7-4 所 示 。 
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675 ”打开 网 页 文档 
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图 7-4 选择 “交换 图 像 ” 选 项 


03 弹出 “交换 图 像 ” 对 话 框 ， 在 对 话 框 中 单 击 “ 设 定 原始 档 为 ”文本 框 右边 的 “浏览 ”按钮 ， 弹 出 如 图 7-5 所 示 的 对 话 框 ， 在 对 话 框 中 选择 图 像 。 


04 单 击 “确定 ”按钮 ， 图 像 添 加 到 文本 框 中 ， 义 选 “ 预 先 载 入 图 像 ” 复 选 框 ， 在 载 入 页 时 将 新 图 像 载 入 到 浏览 器 的 缓存 中 ， 如 图 7-6 所 示 ， 这 样 可 以 防止 当 图 像 该 出 现时 由 于 下 载 而 导致 的 延迟 。 
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图 7-5 “选择 图 像 源 文件 ”对 话 框 
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图 7-6 “交换 图 像 ” 对 话 框 
“交换 图 像 ” 对 话 框 中 可 以 进行 如 下 设置 。 
ОВ: 在 列表 中 选择 要 更 改 其 来 源 的 图 像 。 


` 设 定 原始 档 为 : 单 击 “ 浏 览 ”按钮 选择 新 图 像 文件 ， 文 本 框 中 显示 新 图 像 的 路 径 和 文件 名 。 


. 预先 载 入 图 像 : ДЕЯ, ХУ ЕЕ SAB RH, А А 2] R) ОЖЖТФ, РЕЗЕРВИ ЕНЕР F 2 386536 8 


05 单 击 “ 确 定 ” 按 钮 ， 添加 到 “行为 ”面板 中 ， 如 图 7-7 所 示 。 
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图 7-7 添加 行为 


06 保存 文档 。 按 F12 功 能 键 进入 浏览 器 中 预览 ， 当 和 鼠标 指针 未 接近 图 像 时 的 效果 如 图 7-1 所 示 ， 和 鼠标 指针 接近 图 像 时 的 效果 如 图 7-2 所 示 。 


7.3.2 ”弹出 信息 


“弹出 信息 ”行为 显示 一 个 带 有 指定 消息 的 Javascript 警 告 框 ， 因 为 Javascript 警 告 只 有 一 个 “确定 ”按钮 ， 所 以 使 用 此 行为 可 以 提供 信息 ， 而 不 能 为 浏览 者 提供 选择 。 


下 面 通过 实例 讲述 “弹出 信息 ”行为 的 使 用 方法 ， 其 前 、 后 效果 如 图 7-8 和 图 7-9 所 示 ， 具 体操 作 步 又 如 下 。 
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679 ”弹出 信息 后 的 效果 


01 打开 网 页 文档 ， 如 图 7-10 所 示 。 


> > A ` _ د‎ А 6 ‚> > “<л-.,.> “<л-.,.> ` “. 2— `)„”? ` 十 Ма _ د‎ ` & ро ` > — 
在 文档 窗口 中 选择 <body> 标 签 ， 选 择 菜 单 栏 中 的 “窗口 | НЯ #4, ТЖ НЯ 面板 ,在 面板 中 单 击 “ 添 加 行为 ”按钮 ， 在 弹出 的 菜单 中 选择 “弹出 信息 ”， 如 图 7-11 所 示 。 


弹出 如 图 7-12 所 示 的 “弹出 信息 ”对 话 框 ， 在 对 话 框 中 输入 内 容 。 


单 击 “确定 ” 按钮 ， 添加 行为 ， 如 图 7-13 所 示 。 
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67-50 ”打开 网 页 文档 
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图 7-11 选择 “弹出 信息 ”选项 
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87-12 “弹出 信息 ”对 话 框 
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图 7-13 ”添加 行为 


05 保存 文档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 ， 效 果 如 图 7-9 所 示 。 


7.3.3 ”打开 浏览 器 窗口 


使 用 “打开 浏览 器 窗口 ”行为 可 以 在 一 个 新 窗口 中 打开 URL， 可 以 指定 新 窗口 的 属性 ， 如 窗口 的 大 小 、 属 性 和 名 称 。 下 面 通过 实例 讲述 “打开 浏览 器 窗口 ”的 使 用 方法 ， 其 前 、 后 效果 如 图 7-14 和 图 7- 
15 所 示 ， 具 体操 作 步 又 如 下 。 
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67-55 “打开 浏览 器 窗口 后 的 效果 


01 ”打开 网 页 文档 ， 如 图 7-16 所 示 。 
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02 ”在 文档 窗口 中 选择 <body> 标 签 ， 选 择 菜 单 栏 中 的 “窗口 ”| “行为 ”命令 ， 打 开 “ 行 为 ”面板 ， 在 面板 中 单 击 “添加 行为 ”按钮 + ， 在 弹出 的 菜单 中 选择 “打开 浏览 器 窗口 ”命令 ， 如 图 7-17 所 
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67-56 ”打开 网 页 文档 
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67-57 选择 “打开 浏览 器 窗口 ” 


03 ”弹出 “打开 浏览 器 窗口 ”对 话 框 ， 在 对 话 框 中 单 击 “ 要 显示 的 URL” 文 本 框 右 边 的 “浏览 ”按钮 ， 弹 出 “选择 文件 ”对话 框 ， 在 对 话 框 中 选择 文件 ， 如 图 7-18 所 示 。 


04 单 击 “ 确 定 ” 按 钮 ， 添 加 到 文本 框 中 ， 如 图 7-19 所 示 ， 并 在 “窗口 名 称 ” 文 本 框 中 输入 名 称 。 
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87-18 “选择 文件 ”对 话 框 
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图 7-19 “打开 浏览 器 窗口 ”对 话 框 


05 单 击 “确定 ”按钮 ， 添 加 行为 ， 如 图 7-20 所 示 。 
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# 7-20 ”添加 行为 


06 保存 文档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 ， 效 果 如 图 7-15 所 示 。 


提示 “如果 不 调整 要 打开 的 浏览 器 窗口 大 小 ， 在 打开 时 它 的 大 小 与 打开 它 的 窗口 相同 。 实 际 中 会 遇 到 很 多 网 页 在 打开 时 同时 弹出 一 些 信息 窗口 (如 招聘 启事 ) 或 广告 窗口 ， 它 们 使 用 的 都 是 Dreamweavet 
行为 中 的 “打开 浏览 器 窗口 ”动作 。 


734 ”设置 状态 栏 文本 


“设置 状态 栏 文本 ”行为 在 浏览 器 窗口 底部 左 侧 的 状态 栏 中 显示 消息 ， 如 可 以 使 用 此 行为 在 状态 栏 中 说 明 链接 的 目标 而 不 是 显示 与 其 关联 的 URL。 


下 面 通过 实例 讲述 “设置 状态 栏 文本 ”行为 的 使 用 方法 ， 使 用 “设置 状态 栏 文本 ”行为 的 前 、 后 效果 如 图 7-21 和 图 7-22 所 示 ， 具 体操 作 步 骤 如 下 。 
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97-21 设置 状态 栏 文本 前 的 效果 
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97-22 设置 状态 栏 文本 后 的 效果 
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01 ”打开 网 页 文档 ， 如 图 7-23 所 示 。 


02 在 文档 窗口 中 选择 <body> 标 签 ， 
栏 文本 ”命令 ， 如 图 7-24 所 示 。 
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， 在 从 弹出 的 菜单 中 选择 “设置 文本 | 
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7-24 选择 “设置 状态 栏 文本 ”命令 


03 ”弹出 “设置 状态 栏 文本 ”对 话 框 ， 在 对 话 框 中 的 “消息 ”文本 框 中 输入 消息 ， 如 图 7-25 所 示 。 


04 单 击 “ 确 定 ” 按钮 ， 添 加 行为 ， 如 图 7-26 所 示 。 


05 保存 文档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 ， 效 果 如 图 7-22 所 示 。 


”注意 - 并 非 所 有 浏览 器 都 去 持 更 改 状态 栏 广 本， неми 
器 全 根据 用 户 首选 上 汰 数 紊 区 定 旺 否 允许 此 功能 。 


图 7-25 “设置 状态 栏 文本 ”对 话 框 
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# 7-26 添加 行为 


7.3.5 ҰЯҢ Шауабсгірі 


下 面 利用 “调用 JavaScript” 行 为 创建 一 个 自动 关闭 的 网 页 ， 其 前 、 后 效果 如 图 7-27 和 图 7-28 所 示 ， 具 体操 作 步 又 如 下 。 
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7-27 调用 JavaScript 前 的 效果 
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17-28 ”调用 JavaScript 后 的 效果 


01 打开 网 页 文档 ， 如 图 7-29 所 示 。 


> 6 2. رر‎ ес » ес » ` “. » ` = m ` «с. » 
02 在 文档 窗口 中 选择 <body> 标 签 ， 选 择 菜单 栏 中 的 “窗口 ”| “行为 ” 命令， 打开“ 行为 ”面板 ， 在 面板 中 单 击 “ 添 加 行为 ”按钮 ， 在 菜单 中 选择 “调用 JavaScript” 命 令 ， 如 图 7-30 所 示 。 
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6729 ”打开 网 页 文档 
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7-30 选择 “调用 JavaSctipt ”命令 
弹出 “调用 JavaSctipt” 对 话 框 ， 在 对 话 框 中 输入 window.close Ө ， 如 图 7-31 所 示 。 


单 击 “确定 ” 按 钮 ， 添 加 到 “行为 ”面板 ， 将 事件 设置 为 onLoad， 如 图 7-32 所 示 。 


调用 JavaScript 


| JavaScript window. close ()| | 


7-31 “调用 JavaScript” 对 话 框 
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图 7-32 ”添加 行为 


05 保存 文 档 。 按 F12 功 能 键 进入 浏览 器 中 预览 ， 效 果 如 图 7-28 所 示 。 


7.3.6 АИК 


“ 转 到 URL” 动 作 在 当前 窗口 或 指定 的 框架 中 打开 一 个 新 网 页 ， 此 行为 对 通过 一 次 单 击 更 改 两 个 或 多 个 框架 的 内 容 特 别 有 用 。 


下 面 通过 实例 讲述 “ 转 到 URL” 的 使 用 方法 ， 跳 转 前 的 效果 如 图 7-33 所 示 ， 跳 转 后 的 效果 如 图 7-34 所 示 ， 具 体操 作 步 骤 如 下 。 
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图 7-33” 跳 转 前 的 效果 
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4734 ” 跳 转 后 的 效果 
01 打开 网 页 文档 ， 如 图 7-35 所 示 。 


+ 


02 选择 菜单 栏 中 的 “窗口 ”|“ 行 为 ”命令 ， 打 开 “ 行 为 ”面板 。 在 面板 中 单 击 “添加 行为 ”按钮 “*， 在 弹出 的 菜单 中 选择 “ 转 到 URL” 命 令 ， 如 图 7-36 所 示 。 


03 ”弹出 “ 转 到 URL” 对 话 框 ， 在 对 话 框 中 单 击 URIL 文 本 框 右边 的 “浏览 ”按钮 ， 在 “选择 文件 ”对 话 框 中 选择 文件 ， 如 图 7-37 所 示 ， 或 在 URL 文 本 框 中 直接 输入 该 文档 的 路 径 和 文件 名 。 


04 单 击 “确定 ”按钮 ， 添 加 到 对 话 框 中 ， 如 图 7-38 所 示 。 
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67-55 ”打开 网 页 文档 
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4737 “选择 文件 ”对 话 框 
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图 7-38 “ 转 到 URL” 对 话 框 


05 单 击 “ 确 定 ” 按 钮 ， 添 加 行为 ， 如 图 7-39 所 示 。 
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06 保存 文 档 。 按 F12 功 能 键 进入 浏览 器 


7.3.7 blind 
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47-39 ”添加 行为 


页 览 效 果 ， 跳 转 前 的 效果 如 图 7-33 所 示 ， 跳 转 后 的 效果 如 图 7-34 所 示 。 


使 用 blind 效 果 可 以 使 元 素 变 大 或 变 小 ， 使 用 blind 前 、 后 的 效果 如 图 7-40 和 图 7-41 所 示 ， 具 体操 作 步 又 如 下 。 
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图 7-40 使 用 blind 前 的 效果 
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图 7-41 使 用 blind 后 的 效果 
01 ”打开 网 页 文档 ， 选 择 要 应 用 效果 的 内 容 或 布局 对 象 ， 如 图 7-42 所 示 。 


02 在 “行为 ”面板 中 单 击 “ 添 加 行为 ”按钮 ы. ， 在 弹出 的 菜单 中 选择 “效果 ”|blind 命 令 ， 如 图 7-43 所 示 。 
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8742 ”打开 网 页 文档 
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97-43 ”选择 blind 命 令 


03 ”弹出 blind 对 话 框 ， 在 对 话 框 的 “目标 元 素 ” 中 选择 “< 当前 选 定 内 容 >” 选 项 ，“ 效 果 持续 时 间 ” 设 置 为 “1000”， ОТД” PK Whide, “26 Ар, 37-4401. 


04 单 击 “确定 ”按钮 ， 添 加 行为 ， 如 图 7-45 所 示 。 
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图 7-44 “blind” 对 话 框 
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7-45 ”添加 行为 


“blind” 对 话 框 中 主要 有 以 下 参数 。 

Нил: 选择 茶 个 对 象 的 ID。 如 果 已 经 选择 了 一 个 对 象 ， 则 选择 “< 当前 选 定 内 容 >” 选 项 。 
效果 持续 时 间 : 定义 出 现 此 效果 的 时 间 ， 用 毫秒 表示 。 

- 可 见 性 : 有 三 中 选项 即 hide、show、toggle。 

әде: 在 此 设置 图 像 的 变化 方向 ， 即 up、down、left、tight、vettical、hotizontal 。 


05 保存 文档 。 按 F12 功 能 键 进入 浏览 器 中 预览 效果 ， 如 图 7-41 所 示 。 


7.3.8 “Fold 效果 


使 用 Fold 效 果 可 以 使 元 素 从 页 面 下 消失 ， 然 后 向 右 消失 ， 使 用 Fold 前 、 后 的 效果 如 图 7-46 和 图 7-47 所 示 ， 有 具体 操作 步骤 如 下 。 
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7-46 ”使 用 Fold 前 的 效果 
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67-477 使 用 Fold 后 的 效果 


01 ”打开 网 页 文档 ， 选 择 要 应 用 效果 的 内 容 或 布局 对 象 ， 如 图 7-48 所 示 。 


02 在 “行为 ”面板 中 单 击 “ 添 加 行为 ”按钮 E, 在 弹出 菜单 中 选择 “效果 ”|Fold 命 令 ， 如 图 7-49 所 示 。 
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图 7-48 ”打开 网 页 文档 
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7-49 ”选择 Fold 命 令 


03 弹出 Fold 对 话 框 ， 在 对 话 框 中 的 “目标 元 素 ” 中 选择 “< 当前 选 定 内 容 >” 选 项 ， 
图 7-50 所 示 。 
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可见 性 ”设置 的 hide，“ 水 平 优先 ”选择 false，“ 大 小 ”设置 为 15 像 素 ， 如 


04 单 击 “确定 ”按钮 ， 添 加 行为 。 如 图 7-51 所 示 。 
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# 7-50 ”Fold 对 话 框 
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8751 添加 行为 


05 保存 网 页 。 按 F12 功 能 键 进入 浏览 器 中 预览 ， 效 果 如 图 7-47 所 示 。 


739 ”检查 插件 
“检查 插件 ”动作 用 来 检查 访问 者 的 计算 机 中 是 否 安装 了 特定 的 插件 ， 从 而 决定 将 访问 者 带 到 不 同 的 页 面 ，“ 检 查 插 件 ”动作 具体 使 用 方法 如 下 。 


打开 “行为 ”面板 ， 单 击 “ 行 为 ”面板 中 的 “添加 行为 ”按钮 ЕЎ ， 在 弹出 的 菜单 中 选择 “检查 插件 ”命令 ， 弹 出 “检查 插件 ”对 话 框 ， 如 图 7-52 所 示 。 设 置 完成 后 ， 单 击 “ 确 定 ”按钮 。 


пе бан Flash 


O ал: 


如 果 有 , 转 到 URL: | Пан... (Ша) 


否则 , 转 到 URL: | | КЭШ... 


[] шетвез , 则 始终 转 到 笔 一 个 URL 


图 7-52 “检查 插件 ”对 话 框 
在 “检查 插件 ”对 话 框 中 可 以 设置 以 下 参数 。 
- 在 “插件 ”下 拉 列 表 中 选择 一 个 插件 ， 或 选择 “输入 ” 单 选 按钮 并 在 右边 的 文本 框 中 输入 插件 的 名 称 。 
“如 果 有 ， 转 到 URL ”文本 框 : 为 具有 该 插件 的 访问 者 指定 一 个 URL。 
“否则 ， 转 到 URL” 文 本 框 : 为 不 具有 该 插件 的 访问 者 指定 一 个 蔡 代 URL。 


提示 。 如果 指定 一 个 远程 的 URL， 则 必须 在 地 址 中 包括 前 级 http://; 若 要 让 具有 该 插件 的 访问 者 留 在 同一 页 上 ， 此 文本 框 不 必 填 写 任何 内 容 。 


7.3.10 ”检查 表单 


“检查 表单 ”行为 检查 指定 文本 域 的 内 容 以 确保 输入 了 正确 的 数据 类 型 。 使 用 onBlur 事 件 将 此 动作 分 别 附 加 到 各 文本 域 ， 在 用 户 填写 表单 时 对 文本 域 进行 检查 ; 或 使 用 onSsubmit 事 件 将 其 附加 到 表 
单 ， 再 单 击 “提交 ”按钮 ， 同 时 对 多 个 文本 域 进行 检查 。 将 此 行为 附加 到 表单 以 防止 表单 提交 到 服务 器 后 指定 的 文本 域 包含 无 效 的 数据 。 


下 面 通过 实例 讲述 “检查 表单 ”行为 的 使 用 方法 ， 使 用 “检查 表单 ”前 的 效果 如 图 7-53 所 示 ， 使 用 “检查 表单 ”后 的 效果 如 图 7-54 所 示 ， 有 具体 操作 步骤 如 下 。 
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67-553 ”检查 表单 前 效果 
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7-54 检查 表单 后 效果 


01 打开 网 页 文档 ， 如 图 7-55 所 示 。 


02 选中 表单 中 的 文本 域 ， 单 击 “ 行 为 ”面板 中 的 “添加 行为 ”按钮 +. ， 在 弹出 的 菜单 中 选择 “检查 表单 ”命令 ， 如 图 7-56 所 示 。 
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7-56 ”选择 “检查 表单 ”命令 


03 弹出 “检查 表单 ”对 话 框 ， 在 对 话 框 中 进行 相应 的 设置 ， 如 图 7-57 所 示 。 


04 单 击 “ 确 定 ” 按 钮 ， 添 加 行为 ， 如 图 7-58 所 示 。 
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图 7-57 “检查 表单 ”对 话 框 
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7-58 添加 行为 
“可 接受 ”选项 中 主要 有 以 下 参数 。 


任何 东西 : 如 果 该 文本 域 是 必需 的 ， 但 不 需要 包含 任何 特定 类 型 的 数据 ， 则 单 击 选中 “任何 东西 ” 单 选 按钮 。 


. 电子 邮件 地 址 : 单 击 选中 “电子 邮件 地 址 ” 单 选 按钮 检查 该 域 是 否 包含 一 个 @ 符 号 。 
. 数字 : 使 用 “数字 ”检查 该 文本 域 是 否 只 包含 数字 。 
数字 从 : 使 用 “数字 从 ”检查 该 文本 域 是 否 包 含 特定 范围 内 的 数字 。 


05 保存 文档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 效果 。 当 在 文本 域 中 输入 不 规则 密码 时 ， 表 单 将 无 法 正常 提交 到 后 台 服 务 器 ， 这 时 会 出 现 提示 信息 框 ， 并 要 求 重 新 输入 ， 如 图 7-54 所 示 。 


第 8 章 ”动态 网 站 设计 基础 


动态 网 页 技术 的 出 现 使 得 网 站 从 展示 平台 变 成 了 网 络 交 互 平台 。Dreamweaver 的 可 视 化 工具 可 以 开发 动态 站 点 ， 而 不 必 编 写 复杂 的 代码 。 动 态 网 页 以 数据 库 技术 为 基础 ， 可 以 大 大 降低 网 站 维护 的 工作 
量 。 本 章 主要 学 习 动态 网 页 平台 的 搭建 、 数 据 库 连 接 的 创建 。 


重点 内 容 
` 熟悉 动态 网 页 的 特点 与 制作 过 程 
` 了解 搭建 本 地 服务 器 


` 掌握 创建 数据 库 连接 


8.1 ”动态 网 页 的 特点 与 制作 过 程 


数据 库 是 创建 动态 网 页 的 基础 。 对 于 网 站 来 说 一 般 都 要 准备 一 个 用 于 存储 、 管 理 和 获取 客户 信息 的 数据 库 。 利 用 数据 库 制 作 的 网 站 ， 一 方面 ， 在 前 台 访 问 者 可 以 利用 查询 功能 很 快 地 找到 自己 要 的 资 
кр 另 一 方面 ， 在 后 台 ， 网 站 管理 者 通过 后 台 管 理 系统 很 方便 地 管理 网 站 ， 而 且 后 台 管 理 系统 界面 直观 ， 即 使 不 懂 计算 机 的 人 也 很 容易 学 会 使 用 。 


8.1.1 动态 网 页 的 特点 
动态 网 页 是 与 静态 网 页 相对 应 的 ， 也 就 是 说 ， 网 页 URL 的 后 绎 不 是 .htm、.html、.shtml、.xml 等 静态 网 页 的 常见 形式 ， 而 是 以 asp、jsp、.php、.perl、.cgi 等 形式 为 后 经， 并 且 在 动态 网 页 网 址 中 有 一 
个 标志 性 的 符号 一 一 “?“ 


这 里 说 的 动态 网 页 ， 与 网 页 上 的 各 种 动画 、 滚 动 字幕 等 视觉 上 的 “动态 效果 ”没有 直接 关系 ， 动 态 网 页 也 可 以 是 纯 文 字 内 容 的 ， 也 可 以 是 包含 各 种 动画 的 内 容 ， 这 些 只 是 网 页 具体 内 容 的 表现 形式 ， 无 
论 网 页 是 否 具 有 动态 效果 ， 采 用 动态 网 站 技术 生成 的 网 页 都 称 为 动态 网 页 。 


从 网 站 浏览 者 的 角度 来 看 ， 无 论 是 动态 网 页 还 是 静态 网 页 ， 都 可 以 展示 基本 的 文字 和 图 片 信息 ， 但 从 网 站 开发 、 管 理 、 维 护 的 角度 来 看 就 有 很 大 的 差别 。 将 动态 网 页 的 一 般 特点 简要 归纳 如 下 : 
(1) 动态 网 页 以 数据 库 技术 为 基础 ， 可 以 大 大 降低 网 站 维护 的 工作 量 。 

(2) 采用 动态 网 页 技术 的 网 站 可 以 实现 更 多 的 功能 ， 如 用 户 注册 、 用 户 登 录 、 在 线 调查 、 用 户 管理 、 订 单 管 理 等 。 

(3) 动态 网 页 实际 上 并 不 是 独立 存在 于 服务 器 上 的 网 页 文件 ， 只 有 当 用 户 请 求 服务 器 时 才 返 回 一 个 完整 的 网 页 。 


(4) 动态 网 页 中 的 “? ”对 搜索 引擎 检索 存在 一 定 的 问题 ， 搜 索引 警 一 般 不 可 能 从 一 个 网 站 的 数据 库 中 访问 全 部 网 页 ， 或 者 出 于 技术 方面 的 考虑 ， 搜 索 蜂 蛛 不 去 抓 取 网 址 中 “?”” 后面 的 内 容 ， 因 此 采 
用 动态 网 页 的 网 站 在 进行 搜索 引擎 推广 时 需要 做 一 定 的 技术 处 理 才 能 适应 搜索 引擎 的 要 求 。 


8.1.2 动态 网 页 工作 原理 


动态 网 页 技术 的 工作 原理 : 使 用 不 同 技术 编写 的 动态 页 面 保存 在 Web 服 务 器 内 ， 当 客户 端 用 户 向 Web 服 务 器 发 出 访问 动态 页 面 的 请 求 时 ，Web 服 务 器 将 根据 用 户 所 访问 页 面 的 后 缀 名 确定 该 页 面 所 使 用 
的 网 络 编程 技术 ， 然 后 把 该 页 面 提交 给 相应 的 解释 引擎 ; 解释 引擎 扫描 整个 页 面 找到 特定 的 定 界 符 ， 并 执行 位 于 定 界 符 内 的 脚本 代码 以 实现 不 同 的 功能 ， 如 访问 数据 库 ， 发 送 电子 邮件 ， 执 行 算术 或 逻辑 运 
算 等 ， 最 后 把 执行 结果 返回 Web 服 务 器 ; 最 终 ，Web 服 务 器 把 解释 引擎 的 执行 结果 连同 页 面 上 的 HTML 内 容 以 及 各 种 客户 端 脚本 一 同 传送 到 客户 端 。 如 图 8-1 所 示 为 动态 网 页 的 工作 原理 图 。 
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图 8-1 动态 网 页 的 工作 原理 图 


8.1.3 动态 网 站 近 术 核心 


动态 网 站 的 工作 方式 其 实 很 简单 ， 那 么 是 不 是 动态 网 页 学 习 和 开发 就 轻松 了 呢 ? 显然 不 是 这 样 的 。 要 使 动态 网 站 动 起 来 ， 其 中 会 需要 多 种 技术 进行 支撑 。 简 单 概括 就 是 : 数据 传输 、 数 据 人 存储 和 服务 管 
E, 


1. 数 据 传 输 
有 的 读者 可 能 会 想到 ，HTTP 不 是 专门 负责 数据 传输 的 吗 ”是 的 。 但 是 HTTP 仅 是 一 个 应 用 层 的 自然 协议 。 如 何 获取 HTTP 请 求 消息 ”还 必须 使 用 一 种 技术 来 实现 。 
可 以 选用 一 种 编程 语言 (如 C、Java 等 ) 来 设置 和 接收 HTTP 请 求 和 响应 消息 的 构成 ， 但 是 这 种 过 程 是 非常 费时 、 费 力 ， 也 是 易 错 的 劳动 ， 对 于 广大 初学 者 来 说 简直 望尘莫及 。 


如 果 能 够 提供 现成 的 技术 ， 封 装 对 HTTP 请 求 和 响应 消息 的 控制 ， 岂 不 是 简化 了 开发 、 降 低 了 学 习 的 门槛 ;而 服务 器 技术 的 一 个 核心 功能 就 是 负责 对 HTTP 请 求 和 响应 消息 的 控制 。 例 如 ， 在 ASP 中 ,我 
们 直接 调用 Request 和 Response 这 两 个 对 象 ， 然 后 利用 它们 包含 的 属性 和 方法 就 可 以 完成 HTTP 请 求 和 响应 的 控制 。 在 其 他 服务 器 技术 中 ， 也 都 提供 这 些 基本 功能 ， 但 是 所 使 用 的 对 象 和 方法 可 能 略 有 不 
同 。 


2. 数 据 存 储 


数据 传输 是 动态 网 站 的 基础 ， 但 是 如 何 存 储 数据 也 是 动态 网 站 必须 解决 的 核心 技术 之 一 。 也 许 你 可 
是 最 佳 方式 。 试 想 ， 在 会 员 管理 网 站 中 ， 为 了 保证 每 一 位 登录 会 员 都 能 够 通过 每 个 页 面 的 验证 ， 我 们 可 
疑 会 增加 HTTP 传 输 的 负担 ， 甚 至 造成 网 络 的 堵塞 ， 更 为 要 命 的 是 这 很 容易 造成 整个 网 络 传输 的 混乱 。 


想到 利用 HTTP 协 议 实现 在 不 同 页 面 之 间 传 输 信息 。 是 的 ， 但 是 这 仅 解 决 了 信息 传输 的 基本 途径 ， 不 
需要 在 HTTP 中 不 断 附加 每 位 登录 会 员 的 信息 ， 这 本 身 就 是 件 很 麻烦 的 事情 。 如 果 登 录 会 员 很 多 ,无 
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显然 如 果 使 用 HTTP 来 完成 所 有 信息 的 共享 和 传输 问题 是 很 不 现实 的 ， 也 是 行 不 通 的 。 最 理想 的 方法 是 服务 器 能 够 提供 一 种 技术 来 存储 不 同类 型 的 数据 。 例 如 ， 根 据 信息 的 应 用 范围 可 以 分 为 : 应 用 程序 
级 变量 (存储 的 信息 为 所 有 人 共享 ) 和 会 话 级 变量 (存储 的 信息 仅 为 某 个 用 户 使 用 ) 。 一 般 服务 器 技术 都 能 够 提供 服务 器 内 存 管理 ， 人 在 服务 器 内 存 里 划分 出 不 同 区 域 ， 专 门 负责 存储 不 同类 型 的 变量 ， 以 实 
现 数据 的 共享 和 传递 。 另 外 ， 一 般 服务 器 技术 都 会 提供 Cookie 技 术 ， 以 便 把 用 户 信息 保存 到 用 户 本 地 的 计算 机 中 ， 使 用 时 再 随时 从 客户 端 调 出 来 ， 从 而 实现 信息 的 长 久保 存 和 再 利用 。 


3. 服 务 管 理 


如 果 解 决 了 动态 网 站 的 数据 传输 和 存储 这 两 个 基本 问题 ， 动 态 网 站 的 条 件 就 基本 成 了 了 。 但 是 要 希望 动态 网 站 能 够 稳健 地 运行 ， 还 需要 一 套 技术 来 维持 这 种 运行 状态 。 这 套 技术 就 是 服务 器 管理 ， 实 际 
上 这 也 是 服务 器 技术 中 最 复杂 的 功能 。 


当然 ， 我 们 这 里 所 说 的 服务 管理 仅 仪 是 狭义 的 管理 概念 ， 它 仪 包括 服务 器 参数 设置 、 动 态 网 站 环境 设置 ， 以 及 网 站 内 不 同 功能 模块 之 间 的 协同 管理 。 例 如 ， 网 站 物理 路 径 和 相对 路 径 的 管理 、 服 务 器 安 
全 管理 、 网 站 默认 值 管 理 、 扩 展 功能 管理 和 辅助 功能 管理 ， 以 及 一 些 管理 工具 支持 等 。 


你 可 以 想象 一 下 ， 如 果 没 有 服务 器 管理 技术 的 支持 ， 整 个 服务 器 可 能 只 能 运行 一 个 网 站 (或 一 个 Web 应 用 程序 ) ， 动 态 网 页 也 无 法 准确 定位 自己 的 位 置 。 整 个 网 站 处 于 一 片 混乱 、 混 沌 状态 。 例 如 ， 在 
AsP 服 务 器 技术 中 ， 我 们 可 以 利用 Server 对 象 来 管理 各 种 功能 ， 如 网 页 定位 、 环 境 参 数 设 置 、 安 装 扩展 插件 等 。 
82 ”动态 网 站 技术 类 型 


实际 上 目前 常用 的 三 类 服务 器 技术 就 是 ASP (Active Server Pages， 活 动 服务 器 网 页 ) 、JSP (Java Server Pages，Java 服 务 器 网 页 ) 、PHP (Hypertext Preprocessor， 超 文本 预 处 理 程序 ) 。 这 些 
技术 的 核心 功能 都 是 相同 的 ， 但 是 它们 基于 的 开发 语言 不 同 ， 实 现 功能 的 途径 也 存在 差异 。 如 果 当 你 掌握 了 一 种 服务 器 技术 ， 再 学 习 另 一 种 服务 器 技术 ， 就 会 发 现 简单 多 了 。 这 些 服务 器 技术 都 可 以 设计 出 


常用 动态 网 页 功能 ， 对 于 一 些 特殊 功能 ， 昌 然 不 同 服务 器 技术 支持 程度 不 同 ， 操 作 的 难 易 程度 也 略 有 差别 ， 甚 至 还 有 些 功能 必须 借助 各 种 外 部 扩展 才 可 以 实现 。 


8.2.1 ASP 


AsP 是 Active Server Page 的 缩写 ， 意 为 “动态 服务 器 页 面 ”。AsSP 是 微软 公司 开发 的 代 蔡 CGI 脚本 程序 的 一 种 应 用 ， 它 可 以 与 数据 库 和 其 他 程序 进行 交互 ， 是 一 种 简单 、 方 便 的 编程 工具 。AsP 的 网 页 
文件 的 格式 是 .asp， 现 在 常用 于 各 种 动态 网 站 中 。AsSP 是 一 种 服务 器 端 脚本 编写 环境 ， 可 以 用 来 创建 和 运行 动态 网 页 或 Web 应 用 程序 。AsP 采 用 VB Script 和 Javascript 脚 本 语言 作为 开发 语言 ， 当 然 也 可 以 
伐 入 其 他 脚本 语言 。AsP 服 务 器 技术 只 能 在 Windows 系 统 中 使 用 。 


ASP 网 页 具有 以 下 特点 : 
(1) 利用 ASP 可 以 实现 突破 静态 网 页 的 一 些 功能 限制 ， 实 现 动态 网 页 技术 。 
(2) AsP 文 件 是 包含 在 HTML 代 码 所 组 成 的 文件 中 的 ， 易 于 修改 和 测试 。 
(3) 服务 器 上 的 AsP 解 释 程 序 会 在 服务 器 端 执行 ASP 程序， 并 将 结果 以 HTML 格 式 传 送 到 客户 端 浏 览 器 上 ， 因 此 使 用 各 种 浏览 器 都 可 以 正常 浏览 ASP 所 产生 的 网 页 。 


(4) AsP 提 供 了 一 些 内 置 对 象 ， 使 用 这 些 对 象 可 以 使 服务 器 端 脚本 功能 更 强 。 例 如 可 以 从 Web 浏 览 器 中 获取 用 户 通过 HTML 表 单 提交 的 信息 ， 并 在 脚本 中 对 这 些 信 息 进 行 处 理 ， 然 后 向 Web 浏 览 器 发 送 
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(5) ASP 可 以 使 用 服务 器 端 ActiveX 组 件 来 执行 各 种 各 样 的 任务 ， 例 如 存 取 数据 库 、 发 送 Email 或 访问 文件 系统 等 。 
(6) 由 于 服务 器 是 将 ASP 程 序 执行 的 结果 以 HTML 格 式 传 回 客户 端 浏览 器 ， 因 此 使 用 者 不 会 看 到 ASP 所 编写 的 原始 程序 代码 ， 可 防止 ASP 程 序 代 码 被 窃取 。 
(7) 方便 连接 Access 与 SQL 数据 库 。 


(8) 开发 需要 有 丰富 的 经 验 ， 否 则 会 留 出 漏洞 ， 让 黑客 进行 注入 攻击 。 


D22- PAP 

PHP 也 是 一 种 比较 流行 的 服务 器 技术 ， 它 最 大 的 优势 就 是 开放 性 和 免费 服务 。 你 不 用 人 花费 一 分 钱 ， 就 可 以 从 PHP 官 方 站 点 (http://www.php.net) 下 载 PHP 服 务 软件 ， 并 不 受 限制 地 获得 源码 ， 甚 至 可 
以 从 中 加 进 自己 的 功能 。PHP 服 务 器 技术 能 够 兼容 不 同 的 操作 系统 。PHP 页 面 的 扩展 名 为 .php。 

PHP 有 以 下 特性 : 

(1) 开放 的 源 代码 : 所 有 的 PHP 源 代码 事实 上 都 可 以 得 到 。 

(2) PHP 是 免费 的 : 和 其 他 技术 相 比 ，PHP 本 身 免费 且 是 开源 代码 。 

(3) PHP 的 快捷 性 : 程序 开发 快 ， 运 行 快 ， 技 术 本 身 学 习 快 。 因 为 PHP 可 以 被 嵌入 于 HTML 语 言 ， 它 相对 于 其 他 语言 ， 编 辑 简单 ， 实 用 性 强 ， 更 适合 初学 者 。 

(4) 跨 平台 性 强 : 由 于 PHP 是 运行 在 服务 器 端的 脚本 ， 可 以 运行 在 UNIX、Linux、Windows 下 。 

(5) 效率 高 : PHP 消 耗 相当 少 的 系统 资源 。 


(6) 图 像 处 理 : 用 PHP 动 态 创建 图 像 。 
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(7) 面向 对 象 : 在 PHP4、PHP5 中 ， 面 向 对 象 方面 都 有 了 很 大 的 改进 ， 现 在 PHP 完 全 可 以 用 来 开发 大 型 商业 程序 。 


(8) 专业 专注 : PHP 支 持 脚 本 语言 为 主 ， 同 为 类 C 语 言 。 


Ge JSP 

JSP 是 Sun 公 司 倡导 、 许 多 公司 参与 一 起 建立 的 一 种 动态 网 页 技术 标准 。JSP 可 以 在 Serverlet 和 JavaBean 技 术 的 支持 下 ， 完 成 功能 强大 的 Web 应 用 开发 。 另 外 ，JSP 也 是 一 种 跨 多 个 平台 的 服务 器 技术 ， 
几乎 可 以 执行 于 所 有 平台 。 

JSP 技 术 是 用 Java 语 言 作为 脚本 语言 的 ，JSP 网 页 为 整个 服务 器 端的 Java 库 单元 提供 了 一 个 接口 来 服务 于 HTTP 的 应 用 程序 。 


在 传统 的 网 页 HTML 文 件 (*htm，* html) 中 加 入 Java 程 序 片段 和 JSP 标 记 (tag) ， 就 构成 了 JSP 网 页 (*jsp) 。Web 服 务 器 在 遇 到 访问 JSP 网 页 的 请 求 时 ， 首 先 执行 其 中 的 程序 片段 ， 然 后 将 执行 结 
果 以 HTML 格 式 返回 给 客户 。 程 序 片段 可 以 操作 数据 库 、 重 新 定向 网 页 以 及 发 送 Email 等 ， 这 就 是 建立 动态 网 站 所 需要 的 功能 . 


JSP 的 优点 : 
(1) 对 于 用 户 界 面 的 更 新 ， 其 实 就 是 由 Web 服 务 器 进行 的 ， 所 以 给 人 的 感觉 更 新 很 快 。 
(2) 所 有 的 应 用 都 是 基于 服务 器 的 ， 所 以 它们 可 以 时 刻 保 持 最 新 版 本 。 


(3) 客户 端的 接口 不 是 很 烦琐 ， 对 于 各 种 应 用 易于 部 署 、 维 护 和 修改 。 


8.24 ASP, РНРҰПЈЅРЕК 


ASP、PHP 和 JSP 这 三 大 服务 器 技术 具有 很 多 共同 的 特点 : 


(1) 都 是 在 HTML 源 代码 中 混合 其 他 脚本 语言 或 程序 代码 ， 其 中 HTML 源 代码 主要 负责 描述 信息 的 显示 结构 和 样式 ， 而 脚本 语言 或 程序 代码 则 通常 用 于 向 机 器 发 出 一 系列 复杂 的 指令 。 
(2) 程序 代码 都 是 在 服务 器 端 经 过 专门 的 语言 引擎 解释 执行 之 后 ， 然 后 把 执行 结果 嵌入 到 HTML 文 档 中 ， 最 后 再 一 起 发 送 给 客户 端 浏 览 器 。 

(3) ASP、PHP 和 JSP 都 是 面向 Web 服 务 器 的 技术 ， 客 户 端 浏览 器 不 需要 任何 附加 的 软件 支持 。 

当然 ， 它 们 也 存在 很 多 不 同 ， 例 如 : 


(1) JsP 代 码 被 编译 成 Servlet， 并 由 Java 虚 拟 机 解释 执行 ， 这 种 编译 操作 仅 在 对 JSP 页 面 的 第 一 次 请 求 时 发 生 ， 以 后 就 不 再 需要 编译 。 而 ASP 和 PHP 则 每 次 请 求 都 需要 进行 编译 。 因 此 ， 从 执行 速度 上 
来 说 ，JsP 的 效率 当然 最 高 。 


(2) 目前 国内 的 PHP 和 AsP 应 用 最 为 广泛 。 由 于 JSP 是 一 种 较 新 的 技术 ， 国 内 使 用 较 少 。 但 是 在 国外 ，JSsP 已 经 是 比较 流行 的 一 种 技术 ， 尤 其 电子 商务 类 网 站 多 采用 JsP。 


(3) 由 于 免费 的 PHP 缺 乏 规 模 支 持 ， 使 得 它 不 适合 应 用 于 大 型 电子 商务 站 点 ， 而 更 适合 一 些小 型 商业 站 点 。ASP 和 JSP 则 没有 PHP 的 这 个 缺陷 。ASP 可 以 通过 微软 的 COM 技 术 获 得 ActiveX 扩 展 支 
持 ，JSP 可 以 通过 Java Class 和 EJB 获 得 扩展 支持 。 同 时 升级 后 的 ASP.NET 更 是 获得 .NET 类 库 的 强大 支持 ,编译 方式 也 采用 了 JSP 的 模式 ， 功 能 可 以 与 JSP 相 抗衡 。 


总 之 ，AsP、PHP 和 JSP 三 者 都 有 自己 的 用 户 群 ， 它 们 各 有 所 长 ， 读 者 可 以 根据 三 者 的 特点 选择 一 种 适合 自己 的 语言 。 


8.3 ”搭建 本 地 服务 器 


要 建立 具有 动态 的 Web 应 用 程序 ， 必 须 建立 一 个 Web 服 务 器 ， 选 择 一 门 Web 应 用 程序 开发 语言 ， 为 了 应 用 的 深入 还 需要 选择 一 款 数 据 库 管理 软件 。 同 时 ， 因 为 是 在 Dreamweaver 中 开发 的 ， 还 需要 建 
立 一 个 Dreamweaver 站 点 ， 该 站 点 能 够 随时 调试 动态 页 面 。 因 此 创建 一 个 这 样 的 动态 站 点 ， 需 要 Web 服 务 器 +Web 开 发 程序 语言 + 数据 库 管理 软件 + Dreamweaver 动 态 站 点 。 


831 ”安装 IIS 

IIS (Internet Information Server， 互 联网 信息 服务 ) 是 一 种 Web 服 务 组 件 ， 它 提供 的 服务 包括 Web 服 务 器 、FTP 服 务 器 、NNTP 服 务 器 和 SMTP 服 务 器 ， 这 些 服务 分 别 用 于 网 页 浏览 、 文 件 传输 、 新 
闻 服 务 和 邮件 发 送 等 方面 。 使 用 这 个 组 件 提 供 的 功能 ， 使 得 在 网 络 (包括 互联 网 和 局 域 网 ) 上 发 布 信息 成 了 一 件 很 简单 的 事情 。 

安装 l1S 的 具体 操作 步骤 如 下 。 

01 在 Windows 7 系统 下 ， 执 行 “ 开 始 ”| “控制 面板 ”| “程序 ”命令 ， 弹 出 如 图 8-2 所 示 的 页 面 。 


02 ih “Windowsie” ”对话 框 ， 可 以 看 到 有 些 事 需要 手动 选择 的 ， 勾 选 需要 安装 的 功能 复 选 框 ， 如 图 8-3 所 示 。 
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图 8-2 ”打开 或 关闭 Windows 功 能 
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68-5 “Windows 组 件 向 导 ” 对 话 框 
03 单 击 “确定 ”按钮 ， 弹 出 如 图 8-4 所 示 的 “Microsoft Windows ”对话 框 。 


04 安装 完成 后 ， 再 次 进入 “控制 面板 ”， 选 择 “ 管 理工 具 ”， 双 击 “Internet 信 息 服 务 (IS) 管理 器 ”选项 ， 如 图 8-5 所 示 ， 进 入 IIS 设 置 。 
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88-4 IIS 子 组 件 的 选择 画面 
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图 8-5 “Windows 组 件 向 导 ” 
05 选择 Default Web Site， 并 双击 ASP 的 选项 ， 如 图 8-6 所 示 。 


06 IIS7 中 ASP 父 路 径 是 没有 启用 的 ， 要 选择 True， 即 可 开启 父 路 径 ， 如 图 8-7 所 示 。 
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图 8-6 ”双击 ASP 选 项 
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487 可 开启 父 路 径 
07 单 击 右 侧 的 “高 级 设置 ” 超 链 接 ， 弹 出 “高 级 设置 ”对 话 框 ,设置 “物理 路 径 ”， 如 图 8-8 所 示 。 


08 单 击 “ 编 辑 网 站 ”下 面 的 “编辑 按钮， 弹出 “网 站 绑 定 ” 对 话 框 ， 单 击 右 侧 的 “编辑 ”按钮 ， 设 置 网 站 的 端口 ， 如 图 8-9 所 示 。 
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图 8-8 设置 “物理 路 径 ” 
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8.3.2 ”配置 Web 服 务 器 


01 ŽA “Internetik LMA (OS) 管理 器 ”对 话 框 中 的 “默认 文档 ”按钮 ， 如 图 8-10 所 示 。 


02 在 打开 的 页 面 中 单 击 右 侧 的 “添加 ” 超 链 接 ， 如 图 8-11 所 示 。 
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8-11 单 击 右 侧 的 “添加 ” 超 链 接 


03 ”弹出 “添加 默认 文档 ”对 话 框 ， 在“ 名称” 文本 框 中 输入 名 称 ， 单 击 “ 确 定 ” 按 钮 即 可 ， 如 图 8-12 所 示 。 
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84 创建 数据 库 连 接 


动态 页 面 最 主要 的 就 是 结合 后 台数 据 库 ， 自 动 更 新 网 页 ， 所 以 离开 数据 库 的 网 页 也 就 谈 不 上 什么 动态 页 面 。 任 何 内 容 的 添加 、 删 除 、 修 改 、 检 索 都 是 建立 在 连接 基础 上 进行 的 ， 可 以 想象 连接 的 重要 性 
т: 


要 在 ASP 中 使 用 ADO 对 象 来 操作 数据 库 ， 首 先 要 创建 一 个 指向 该 数据 库 的 ODBC 连 接 。 在 Windows 系 统 中 ，ODBC 的 连接 主要 通过 ODBC 数 据 源 管理 器 来 完成 。 下 面 就 以 Windows 7 为 例 讲述 ODBC 数 
据 源 的 创建 过 程 ， 具 体操 作 步 又 如 下 。 


01 执行 “控制 面板 ”| “АЙ” | “ЕНІН” | “数据 源 (ODBC) ”命令 ， 弹 出 “ODBC 数 据 源 管理 器 ”对 话 框 ， 在 对话 框 中 切换 到 “系统 DSN” 选 项 卡 ， 如 图 8-13 所 示 。 
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02 单 击 “ 添 加 ”按钮 ， 弹 出 “创建 新 数据 源 ” 对 话 框 ， 选 择 如 图 8-14 所 示 的 设置 后 ， 单 击 “ 完 成 ”按钮 。 
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“创建 新 数据 源 ” 对 话 框 


提示 64 位 Windows 7 的 操作 系统 里 ODBC 无 法 添加 “修改 ”配置 ， 添 加 数据 源 时 只 有 SQL Setvet 可 选 ， 如 图 8-15 所 示 。 
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图 8-15 
解决 方法 是 : 


通过 C: /Windows/SysWOW64/odbcad32.exe 启 动 32 位 版 本 ODBC 管 理工 具 ,， 便 可 解决 ， 效 果 如 图 8-16 所 示 。 


ые. | 
я Е кізе гі 
H == 
њ Е № оар 
з да = рил! тыш cr Жас fi 
ТЕ тати а, Быти Ше йі винну, Шан mal 
ВЕ Г: тәйке ер баты He liec Әагынс Ке із) 
Жіты рын + Шіру Yirual ТЕРГЕ 
5 ака Шер Бағлан Берат (а ай? 
+5 нш + едва dl стела | kreii Тгей ват lE. REI 
№ йез ال‎ ны, 
РЕТ 
HE 
ы № сро i 
Шегі А. айел 
ہے‎ Бы ты сайга ай 
са БАТАНЫ + cú dove 2ай 
Ще съл RW ШЙ Ае % дойда 
% о сақа 
ни он 4 стірсі12 | 
ті тыны" И) ЛЕ 
Pu, cubana вана OTA ғы пана осла ви 
ж стан дуо та ка 


图 8-10 


03 ”弹出 如 图 8-17 所 示 的 “ODBC Microsoft Access 安 装 ” 对 话 框 ， 选 择 数据 库 的 路 径 ， 在 “数据 源 名 ”文本 框 中 输入 数据 源 的 名 称 ， 单 击 “ 确 定 ” 按 钮 ， 在 如 图 8-18 所 示 的 对 话 框 中 可 以 看 到 创建 的 数 
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8-18 创建 的 数据 源 


第 9 章 Photoshop CC 制作 网 页 图 像 
Adobe Photoshop 是 当今 世界 上 最 为 流行 的 图 像 处 理 软件 ， 其 强大 的 功能 和 友好 的 界面 深 受 广大 用 户 的 喜爱 。 在 网 页 设计 领域 里 photoshop 是 不 可 缺少 的 一 个 设计 软件 ， 一 个 好 的 网 页 创意 不 会 离开 
图 片 ， 只 要 涉及 图 像 ， 就 会 用 到 图 像 处 理 软件 ，Photoshop 理 所 当然 就 会 成 为 网 页 设计 中 的 一 员 。 使 用 photoshop 不 仅 可 以 将 图 像 进行 精确 地 加 工 ， 还 可 以 将 图 像 制作 成 动画 上 传 到 网 页 中 。 


本 章 重 点 
` 编辑 图 像 文 件 
` 使 用 页 面 布局 工具 
- 设置 前 景色 和 背景 色 
创建 选择 区 域 


` 基本 绘图 工具 


91 编辑 图 像 文 件 


下 面 学 习 新 建 、 打 开 、 保 存 等 基本 的 文件 处 理 功 能 ， 它 是 经 常 使 用 的 菜单 之 一 。 因 为 这 些 功能 与 其 他 一 些 应 用 程序 非常 类 似 。 


911 ”新建 与 保存 网 页 图 像 文件 


选择 菜单 栏 中 的 “文件 ”| “新建 ”命令 ， 弹 出 新 建 对 话 框 ， 如 图 9-1 所 示 。 
(1) 名 称 : 新 建文 件 的 名 字 “ 未 标题 -1” 是 Photoshop 默 认 的 名 称 。 


(2) 预 设 : 预 置 文档 的 大 小 ， 如 图 9-2 所 示 的 选择 。 
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图 9-1 “新 建文 件 ” 对 话 杠 
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图 9-2” 预 设 选项 
. 宽度 : 新建 文件 的 宽度 : 其 中 的 “像素 ”为 宽度 单位 ， 也 可 以 选择 英寸 、 厘 米 、 点 、 磅 、 栏 为 单位 。 


Л: 新 建文 件 的 高 度 ， 单 位 同上 。 
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Уй: METER, Др “К/К” Зони, ТЕ УК” AFB. 

- 颜色 模式 : махане, ЖР EEA. ЖА. КСВ ё. СМУКЖЁ,, Тай ё ҖЕ лява. 

ЖЕМ: HEATHER, одне, FRE. Ж ZO 

(3) 高 级 设置 : 包括 色彩 配置 文件 和 像素 纵横 比 。 

完成 图 片 的 处 理 后 ， 如 果 希 望 再 次 使 用 这 个 文件 进行 工作 的 话 ， 存 盘 是 必 不 可 少 的 步骤 ， 否 则 之 前 的 操作 也 是 白费 。 

01 ”选择 菜单 栏 中 的 “文件 ”| “存储 为 ”命令 ， 如 果 是 第 一 次 保存 此 文件 则 出 现 “存储 为 ”对 话 框 ， 如 图 9-3 所 示 。 

02 在 “文件 名 ”文本 框 中 会 出 现 “未 标题 -1” (除非 在 创建 文件 时 已 经 为 它 命 了 名 ) 。 可 以 输入 想 要 的 文件 名 来 代替 它 。 


03 “保存 类 型 ” 框 中 显示 的 是 文件 要 保存 的 格式 ， 通 过 单 击 这 个 弹出 式 菜单 ， 可 以 使 其 成 为 另 一 文件 格式 ， 如 图 9-4 所 示 。 
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图 9-3 “存储 为 ”对 话 框 
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图 9-4 Photoshop 保 存 格 式 


Не: още!) 


912 ”打开 网 页 图 像 文件 


打开 某 种 格式 的 文件 一 般 情 况 下 文件 类 型 默认 为 “所 有 格式 ”， 也 可 以 选择 某 种 特殊 文件 格式 ， 以 在 大 量 的 文件 中 进行 选择 。 选 择 菜单 栏 中 的 “文件 ”| “打开 ”命令 ， 弹 出 如 图 9-5 所 示 的 “打开 ”对 
话 框 ， 如 图 9-6 所 示 的 是 Photoshop 所 支持 的 图 像 格式 。 
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图 9-5 “打开 ”对 话 框 
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99-6 ”所 支持 的 图 像 格式 


ЕТ 


选择 好 要 打开 的 图 像 文件 ， 单 击 “ 打 开 ”′ 按钮 ， 即 可 打开 图 像 文 件 ， 如 图 9-7 所 示 。 
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图 9-7 打开 图 像 文 件 


大 家 平常 在 画图 的 时 候 ， 肯 定 经 常会 遇 到 目标 准确 定位 的 问题 ， 使 用 Photoshop 中 的 参考 线 和 标尺 工具 可 以 很 好 地 解决 布局 定位 的 问题 。 


不 论 当前 工作 在 多 大 的 放大 率 环境 下 ， 使 用 Photoshop 的 标尺 都 不 失 为 一 个 好 主意 。 这 样 就 不 会 看 不 到 文件 或 图 像 的 大 小 。 如 果 屏 幕 还 没有 显示 标尺 ， 而 又 想 显示 它 ， 选 择 菜单 栏 中 的 “视图 ”|“ 标 
尺 ” 命 令 ， 如 图 9-8 所 示 。 


选择 以 后 标尺 就 会 显示 在 图 像 文档 窗口 中 ， 标 尺 是 显示 在 图 像 文档 窗口 顶部 与 左边 缘 处 的 两 条 刻度 线 ， 前 者 称 为 水 平 标尺 ， 后 者 称 为 垂直 标尺 。 水 平 标尺 的 正方 向 指向 屏幕 的 右 方 ， 垂 直 标尺 的 正方 向 
指向 屏幕 的 下 方 ， 其 原点 位 于 左上 角 ， 由 此 组 成 的 是 一 个 二 维 坐标 系统 ， 如 图 9-9 所 示 。 
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图 9-9 ”显示 标尺 


将 光标 对 准 标尺 的 原点 标记 ， 然 后 向 图 像 文档 窗口 中 拖 动 它 。 拖 动 时 ， 一 条 表示 水 平 标尺 的 虚线 ， 与 一 条 表示 垂直 标尺 的 虚线 将 随 光标 移动 ， 而 光标 的 形状 将 是 一 个 小 十 字 架 ， 其 交叉 点 即 为 坐标 原 
点 。 结 束 拖 动 后 ， 标 尺 的 原点 就 会 移 至 新 的 位 置 ， 如 图 9-10 所 示 。 
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图 9-10 ”向 图 像 文档 窗口 中 拖 动 光标 


参考 线 是 浮动 在 图 像 上 的 一 些 直线 ， 利 用 它 可 以 将 坐标 点 定位 在 某 些 操作 的 指定 处 ， 如 当选 取 图 像 后 ， 被 选取 的 图 像 四 周 会 有 一 条 边框 线 ， 移 动 时 就 可 将 它 定位 在 捕捉 的 辅助 线 上 ， 从 而 大 大 地 提高 操 
作 效率 . 


如 果 想 让 参考 线 暂 时 消失 ， 选 择 菜单 栏 中 的 “视图 ”|“ 显 示 ”| “参考 线 ” 命 令 。 再 一 次 选择 菜单 栏 中 的 “视图 ”| “显示 ”| “参考 线 ” 命 令 便 可 以 使 参考 线 重新 出 现 ， 如 图 9-11 所 示 。 
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9-11 选择 “视图 ” | “в” | « 
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如 果 要 移动 图 像 或 对 齐 屏 幕 上 的 多 个 对 象 ， 可 以 拖 动 标尺 。 通 过 执行 “视图 ”|“ 锁 定 参 考 线 ”命令 可 移动 或 锁定 参考 线 。 要 想 建 立 一 个 参考 线 ， 只 需 将 鼠标 放置 在 水 平 标尺 上 面 一 点 或 垂直 标尺 左边 一 


点 的 位 置 即 可 。 按 住 鼠 标 按钮 不 放 并 拖 动 鼠标 ， 将 发 现 鼠 标 指针 变 成 双 箭 头 图 标 ， 当 拖 动 时 ， 参 考 线 便 会 出 现 ， 此 时 便 可 将 参考 线 拖 到 想 在 屏幕 上 放置 的 位 置 。 


使 用 矩形 工具 绘制 矩形 ， 只 需 选 中 矩形 工具 后 ， 在 画布 上 单 击 后 拖拉 光标 即 可 绘 出 所 需 矩 形 。 在 拖拉 时 如 果 按 住 Shift 键 ， 则 会 绘制 出 正方 形 。 


单 击 矩形 工具 会 出 现 如 图 9-12 所 示 的 工具 选项 栏 ， 其 包括 “形状 图 层 ” “路径 ” “填充 像素 ”和 选择 多 边 形 工具 种 类 等 。 
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819-12 ”和 矩形 工具 选项 栏 


在 舞台 中 按 住 鼠 标 左 键 拖 动 即 可 绘制 矩形 ， 如 图 9-13 所 示 。 
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924 ”使 用 直线 工具 


使 用 “直线 工具 ”可 以 绘制 直线 或 有 箭头 的 线段 ， 使 用 方法 同 前 ， 光 标 拖 拉 的 起 始点 为 线段 起 点 ， 拖 拉 的 终点 为 线段 的 终点 。 


直线 工具 的 工具 选项 栏 如 图 9-14 所 示 。 


图 9-14 直线 工具 的 工具 选项 栏 
“ав”: 为 直线 的 宽度 。 
“箭头 ” : 包括 “起 点 ” “终点 ” “宽度 ” “长 度 ” 和 “mw Е” ; 如 图 9-15 所 示 。 


在 舞台 中 按 住 鼠 标 左 键 拖 动 即 可 绘制 直线 ， 如 图 9-16 所 示 。 
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9-16 ”绘制 直线 
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增加 图 像 视图 的 放大 倍数 。 


选中 单行 选择 工具 可 以 用 鼠标 在 图 层 上 拉 出 一 个 像素 高 的 选 框 ， 其 实 就 是 像素 高 为 1 的 水 平 线 选择 框 ， 如 图 9-17 所 示 ， 其 任务 栏 中 同 矩 形 选 框 工 具 选 择 方式 相同 ， 玖 化 只 能 为 0px， 样 式 不 可 选 。 


选中 单列 选 框 工具 可 以 用 鼠标 在 图 层 上 拉 出 一 个 像素 宽 的 选 框 ， 其 实 就 是 像素 宽 为 1 的 垂直 线 选择 框 ， 如 图 9-18 所 示 ， 其 任务 栏 内 容 与 用 法 与 单行 选择 工具 的 完全 相同 。 
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图 9-17 单行 选 框 
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图 9-18 单列 选 框 


93 ”设置 前 景色 和 背景 


在 Photoshop 中 选取 颜色 主要 是 通过 工具 箱 中 的 “前 景色 ”和 “背景 色 ” xe sents, Photoshop 使 用 前 景色 绘图 、 填 充 和 描 边 选区 ， 而 背景 色 是 图 层 的 底 色 。 一 些 与 背景 色 有 关 的 工具 执行 的 
结果 就 得 到 背景 色 ， 例 如 使 用 橡皮 擦 工具 时 得 到 的 就 是 背景 色 ， 具 体操 作 步 骤 如 下 。 


01 打开 一 幅 图 像 文 件 ， 如 图 9-19 所 示 。 


02 ”在 工具 箱 中 选择 魔 棒 工 具 ， 在 舞台 中 单 击 选中 舞台 中 的 桌子 和 柜子 ， 如 图 9-20 所 示 。 
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49-19 ”打开 图 像 文件 
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99-20 ik FP £ FFE + 
03 在 工具 箱 中 单 击 背景 色 按 钮 ， 打 开 “ 拾 色 器 ”对 话 框 ， 选 择 设置 的 背景 色 ， 如 图 9-21 所 示 。 


04 #& “Ял” 按钮， 选取 背景 色 。 按 Cttl+Delete 键 即 可 填充 背景 ， 如 图 9-22 所 示 。 单 击 按钮 可 以 切换 前 景色 和 背景 色 。 


添加 到 色 板 
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69-1 选取 背景 颜色 
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99-22 更 改 背 景色 


94 ”创建 选择 区 域 


运行 Photoshop 后 ， 初 次 使 用 的 工具 应 该 就 是 选择 工具 了 。 要 想 应 用 Photoshop 的 功能 ， 首 先 要 选择 应 用 的 范围 。 


94.1 ЖЕТА 
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99-23 ЖЕТА 
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99-25 ”椭圆 选 框 工具 


9.4.2 ERLE 


Photoshop 的 套 索 工具 内 含 3 个 工具 ， 、 多 边 形 套 索 工具 、 磁 性 套 索 工具 。 套 索 工 具 是 最 基本 的 选区 工具 ， 在 处 理 图 像 中 起 着 很 重要 的 作用 。 套 索 工 具 的 快捷 键 是 字母 L， 如 图 9-26 所 示 
为 套 索 工具 。 


套 索 工 具 组 里 的 第 一 个 套 索 工具 用 于 绘制 任意 不 规则 选区 ， 套 索 工 具 组 里 的 多 边 形 套 索 工具 用 于 绘制 有 一 定 规则 的 选区 ， 而 套 索 工具 组 里 的 磁性 套 索 工具 是 制作 边缘 比较 清晰 ， 且 与 背景 颜色 相差 比较 
大 的 图 片 的 选区 。 在 使 用 的 时 候 注 意 其 属性 栏 的 设置 ， 如 图 9-27 所 示 为 套 索 工具 选项 栏 。 


图 9-26” 套 索 工 具 
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99-27 套 索 工具 选项 栏 
“羽化 ”: 取 值 范围 为 0~250 像 素 ， 可 羽化 选区 的 边缘 ， 数 值 越 大 ， 羽 化 的 边缘 越 大 。 


- ДВЕ”: 该 功能 是 让 选区 更 平滑 。 


943 МЕТА 


Photoshop 的 魔 棒 工 具 ， 是 一 个 选区 工具 ， 其 选择 范围 的 多 少 取决 于 其 工具 选项 栏 中 容 差 值 的 高 低 。 容 差 值 高 ， 选 择 的 范围 就 大 ; SEBR, ЗОРО, БЕТ НЕЕ РЕМИ, ЭП 9-28 


所 示 为 魔 棒 工具 。 魔 棒 工 具 选 项 栏 ， 如 图 9-29 所 示 。 
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99-29 EEL REE 
как М. 可 以 创建 一 个 新 的 选区 。 
жылан М. алланекак, авла, айанжанға. 
пака. ЕТ 


‚эк z x ДИ. 执行 的 结果 ， 就 是 得 到 两 个 选区 相交 的 部 分 。 

ЖЖ: 确定 魔 棒 工 具 的 选择 范围 ， 数 值 越 高 ， 选 择 的 范围 就 越 大 ; 反之 ， 选 择 的 范围 就 小 。 
` 消除 锯 郊 : 消除 边缘 的 锯 妾 ， 使 选择 范围 边缘 光滑 。 

` 连续 : 只 选择 使 用 相同 颜色 的 邻近 区 域 。 


对 所 有 图 层 取 样 : 使 用 所 有 可 见 图 层 中 的 数据 选择 颜色 。 否 则 ， 魔 棒 工 具 将 只 从 现 有 图 层 中 选择 颜色 。 


944 ШЕННЕН 


在 网 页 和 多 媒体 课件 的 制作 中 ， 透 明 背 景 的 图 片 被 广泛 应 用 。 利 用 选择 工具 抠 取 透明 图 像 效 果 如 图 9-30 所 示 ， 具 体操 作 步 又 如 下 。 
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图 9-30 ”透明 图 像 


01 打开 图 像 文 件 ， 如 图 9-31 所 示 。 


在 工具 箱 中 选择 魔 棒 工具 ， 如 图 9-32 所 示 。 
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图 9-31 打开 图 像 文 件 


图 9-32 ARELA 


03 ”在 图 像 上 单 击 选择 区 域 ， 按 住 Shift 键 单 击 选择 剩余 的 区 域 ， 如 图 9-33 所 示 。 


04 ”选择 完毕 后 ， 按 Delete 键 删除 ， 抠 取 透 明 图 像 效 果 如 图 9-34 所 示 。 
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69-55 ”选择 区 域 
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49-34 ЕЕ 
05 ”选择 菜单 栏 中 的 “文件 | “存储 为 Web 所 用 格式 命令， 打开 “存储 为 Web 所 用 格式 ”对话 框 ， 在 文件 格式 下 拉 列 表 中 选择 GIF 选项 ， 选 中 “透明 度 ” 复 选 框 ， 如 图 9-35 所 示 。 


06 žk B 按钮， 打开 “将 优化 结果 存储 为 ”对 话 框 ，“ 格 式 ”选择 “ 仅 限 图 像 ”， 如 图 9-36 所 示 。 单 击 “ 保 存 ” 按 钮 ， 即 可 将 图 像 输 出 为 背景 透明 的 GIF 图 像 ， 如 图 9-36 所 示 。 
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图 9-35 “存储 为 Web 所 用 格式 ”对 话 框 
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图 9-36 “将 优化 结果 存储 为 ”对 话 框 


95 ”基本 绘图 工具 


在 处 理 网 页 图 像 过 程 中 ， 绘 图 是 最 基本 的 操作 。Photoshop CC 提供 了 非常 简捷 的 绘图 功能 。 下 面 就 来 讲述 在 Photoshop 中 ， 画 笔 、 铅 笔 、 加 深 和 减 淡 工具 的 应 用 。 


9.5.1 МЕТА 


画笔 工具 是 绘图 工具 中 最 为 常用 的 工具 之 一 ， 只 要 设置 好 所 需要 的 颜色 、 笔 刷 大 小 、 形 状 、 压 力 参 数 ， 就 可 以 直接 使 用 鼠标 在 页 面 中 进行 绘画 。 
01 ”打开 一 个 图 像 文件 ， 如 图 9-37 所 示 。 


02 在 工具 箱 中 选择 画笔 工具 ， 如 图 9-38 所 示 。 


2]р9 © 1005085829) х 


EE 


T зрамвап Y ЕШ 100%, 


КАНЕ 


Дт ми бау иіс 


АМ АПЕТЕП СЕ FASHION 


йы ай. кееш 


4937 ”打开 图 像 文件 


图 9-38 选择 画笔 工具 


03 ”在 工具 选项 栏 中 单 击 画笔 右 侧 的 下 拉 按 钮 ， 在 弹出 的 “画笔 预 设 ”选择 器 列表 中 选择 “ 星 形 ”选项 ， 如 图 9-39 所 示 。 


04 在 图 像 中 进行 绘制 ， 最 终 效果 如 图 9-40 所 示 。 
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图 9-40 ”绘制 效果 


9.5.2 ШЕГЕ 

本 节 内 容 讲述 铅笔 工具 的 使 用 ， 使 用 铅笔 工具 可 以 绘制 出 硬 的 、 有 棱角 的 线条 ， 它 的 设置 与 画笔 工具 基本 相同 ， 在 这 里 就 不 再 重复 讲述 。 本 节 将 重点 讲述 仪 限于 铅笔 工具 的 自动 涂抹 功能 。 有 具体 步骤 如 
下 。 

01 ”打开 图 像 文件 ， 在 工具 箱 中 选择 铅笔 工具 ， 如 图 9-41 所 示 。 


02 在 工具 选项 栏 中 单 击 画笔 右 侧 的 下 拉 按 钮 ， 在 弹出 的 “画笔 预 设 ”选择 器 列表 中 1; 笔 ” 选 项 ， 如 图 9-42 所 示 。 


69-42 ”选择 “散布 干 画笔 ”选项 


03 ”在 图 像 中 进行 绘制 ， 最 终 效 果 如 图 9-43 所 示 。 
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4943 ”绘制 效果 
953 “ 减 淡 和 加 深 工 具 
减 淡 工 具 的 主要 作用 是 改变 图 像 的 曝光 度 ， 对 图 像 中 局 部 曝光 不 足 的 区 域 ， 使 用 减 淡 工 具 后 ， 可 对 该 局 部 区 域 的 图 像 增 加 明亮 度 (稍微 变 白 ) ， 使 很 多 图 像 的 细节 可 显现 出 来 ， 如 图 9-44 所 示 为 减 淡 工 


加 深 工具 的 主要 作用 也 是 改变 图 像 的 曝光 度 ， 对 图 像 中 局 部 曝光 过 度 的 区 域 ， 使 用 加 深 工具 后 ， 可 使 该 局 部 区 域 的 图 像 变 暗 (稍微 变 黑 ) 。 


减 淡 工 具 和 加 深 工具 的 工具 选项 栏 相 同 ， 如 图 9-45 所 示 ， 包 括 男 笔 、 范 围 、 曝 光度 。 


9-44 AXLE 
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图 9-45” 减 淡 工 具 选 项 栏 


01 打开 一 个 图 像 文 件 ， 如 图 9-46 所 示 。 


02 在 工具 箱 中 选择 加 深 工具 ， 如 图 9-47 所 示 。 
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图 9-46 ”打开 图 像 文件 


图 9-47 选择 “加 深 ” 工具 


03 ”在 图 像 上 单 击 即 可 加 深 图 像 ， 如 图 9-48 所 示 。 
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(9-48 ”加 深 图 像 


前 面 介绍 了 Photoshop CC 的 基础 知识 ， 下 面 就 使 用 Photoshop 绘 制 一 个 网 站 标志 ， 具 体操 作 步 又 如 下 。 
01 


Æ 3) Photoshop, ЗЕ Ер) ХА” | “新 建 ” 命 令 ， 弹出“ 新建 ”对 话 框 ， 将 


将 “宽度 ”设置 为 600 像 素 ，“ 高 度 ” 设 置 为 400 像 素 ， 如 图 9-49 所 示 。 
单 击 “ 确 定 ” 按 钮 ， 新 建 空白 文档 ， 如 图 9-50 所 示 。 


名 称 (N): | 未 标题 -1 
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ЕЯ (5)... 


_ ММ: 600 | Еж ый \ MERTED)... 


高 度 (H): 400 | ВЕ “| 


括 色 模式 (M): | RGB 颜色 
цер (с: | 白色 


图 9-49 “新 建 ”对 话 框 
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图 9-50 空白 文档 


选择 工具 箱 中 的 “ 自 定义 形状 ”工具 ， 在 选项 栏 中 单 击 “ 形 状 ” 按 钮 ， 在 弹出 的 列表 框 中 选择 合适 的 形状 ， 如 图 9-51 所 示 。 


在 舞台 中 按 住 鼠 标 左 键 绘制 形状 ， 如 图 9-52 所 示 。 


图 9-51 选择 形状 


НВ Бен ЕО ЕВО ЗЕМ ARO ЕП МЕ BOM ЖЕЙН) 
w- | ін: = 3 点 


未 标量] 多 100% FER 1, Вов = x 


7) ТЫ 


іші 


= 


Б. 


s e WF S я 


щот 

Се 

= 
ор 


№. 
ш 


图 9-52 ”绘制 形状 
05 选择 菜单 栏 中 的 “图 层 ”| “REFN | “投影 ”人 命令， 打开“ 图 层 样式 ”对 话 框 ， 在 弹出 的 列表 中 设置 图 层 样式 ， 如 图 9-53 所 示 。 


06 Жа “йл” 按钮， 设置 图 层 样式 ， 效 果 如 图 9-54 所 示 。 
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4953 ”设置 图 层 样式 
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9-54 ”绘制 椭圆 
07 ”选择 工具 箱 中 的 李 圆 工具 ， 在 选项 栏 中 将 填充 颜色 设置 为 白色 ， 在 舞台 中 绘制 一 白色 椭圆 ， 如 图 9-55 所 示 。 


08 ”选择 工具 箱 中 的 横 排 文字 工具 ， 在 选项 栏 中 将 字体 大 小 设置 为 80， 字 体 颜色 设置 为 #473bed， 在 狂 台 中 输入 文字 “ 宇 阳 科技 ”， 如 图 9-56 所 示 。 
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9-55 ”绘制 形状 
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89-56 ”输入 文本 
09 选择 菜单 栏 中 的 “图 层 ”| “图 层 样式 ”| “ 描 边 ”命令 ， 打 开 “ 图 层 样式 ”对 话 框 ， 设 置 描 边 选项 ， 如 图 9-57 所 示 。 


10 ” 单 击 “确定 ”按钮 设置 图 层 样式 ， 最 终 效 果 如 图 9-58 所 示 。 
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4957 设置 描 边 
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图 9-58 设置 图 层 样式 


第 10 章 ”网 页 切片 输 出 与 动画 制作 


如 果 网 页 上 的 图 像 较 大 ， 浏 览 器 下 载 整个 图 像 需要 伦 很 长 的 时 间 。 切 片 的 使 用 ， 使 得 整个 图 像 可 以 分 为 多 个 不 同 的 小 图 像 分 开 下 载 ， 这 样 下载 的 时 间 就 大 大 缩短 了 。 在 目前 互联 网 带宽 还 受到 条 件 限 制 
的 情况 下 ， 运 用 切片 来 减少 网 页 下 载 时 间 而 又 不 影响 图 像 的 效果 。 另 外 ， 使 用 Photoshop 还 可 以 轻松 制作 出 GIF 动画 。 


本 章 重点 
. 创建 与 编辑 切片 
. 保存 输出 网 页 图 像 


.创建 GIF 动画 


101 创建 与 编辑 切片 


切片 就 是 将 一 幅 大 图 分 割 为 一 些小 的 图 像 ， 然 后 在 网 页 中 通过 没有 | 间距 和 宽度 的 表格 重新 将 这 些小 的 图 像 没有 缝隙 地 拼接 起 来 ， 成 为 一 幅 完整 的 图 像 。 这 样 做 可 以 缩小 图 像 的 大 小 ， 减 少 网 页 的 下 载 时 
间 ， 还 能 将 图 像 的 一 些 区 域 用 HTML 来 代替 。 


1011 切片 方法 


切片 工具 是 Photoshop 软 件 自 带 的 一 个 平面 图 像 切割 工具 。 使 用 切片 工具 可 以 将 一 个 完整 的 网 页 切割 许多 小 图 像 ， 以 便于 网 络 上 的 下 载 。 利 用 切片 工具 可 以 快速 地 进行 网 页 的 制作 ， 具 体操 作 步 又 如 
Т. 


01 ”打开 原始 文件 下 的 图 像 文件 ， 选 择 工具 箱 中 的 切片 工具 ， 如 图 10-1 所 示 。 


02 “将 光标 置 于 要 创建 切片 的 位 置 ， 按 住 鼠 标 左 键 拖 动 ， 拖 动 到 合适 的 切片 大 小 绘制 切片 ， 如 图 10-2 所 示 。 
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选择 切片 工具 


绘制 切片 


03 ”还 可 以 在 工具 选项 栏 中 设置 切片 工具 的 样式 ， 如 图 10-3 所 示 。 使 用 的 是 固定 长 宽 比 的 切割 效果 。 
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810-53 ”固定 长 宽 比 的 切割 效果 


如 果 切 片 大 小 不 合适 ， 还 可 以 调整 和 编辑 切片 ， 具 体操 作 步 骤 如 下 。 
01 “打开 创建 好 切片 的 图 像 文件 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “划分 切片 ”命令 ， 如 图 10-4 所 示 。 


02 ”弹出 “划分 切片 ”对 话 框 ， 这 里 假定 将 这 部 分 切片 分 为 5 张 小 图 ， 在 “垂直 划分 为 ”选项 中 输入 5 个 横向 切片 ， 设 置 好 后 出 现 5 个 等 分 的 小 图 像 ， 如 图 10-5 所 示 。 
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在 图 像 上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “编辑 切片 选项 ”命令 ， 弹 出 “切片 选项 ”对 话 框 ， 在 对 话 框 中 可 以 设置 切片 的 URT、 
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图 10-4 选择 “划分 切片 ”选项 
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4105 “划分 切片 


目 标 、 信息 文本 等 ， 如 图 10-6 所 示 。 
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10-6 ”编辑 切片 选项 


10.1.3 “优化 和 输出 切片 


使 用 “存储 为 Web 所 用 格式 ”命令 可 以 导出 和 优化 切片 图 像 ，Photoshop 会 将 每 个 切片 存储 为 单独 的 文件 并 生成 显示 切片 图 像 所 需 的 HTML 或 CSS 代 码 。 具 体操 作 步 又 如 下 。 


01 在 图 像 上 设置 好 切片 后 ， 选 择 菜 单 栏 中 的 “文件 ” |“ 存储 为 Web 所 用 格式 ”命令 ， 弹 出 “存储 为 Web 所 用 格式 ”对 话 框 ， 在 对 话 框 中 各 个 切片 都 作为 独立 文件 存储 ， 并 具有 各 自 独 立 的 设置 和 颜色 
调 板 ， 如 图 10-7 所 示 。 
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图 10-7 “存储 为 Web 所 用 格式 ”对 话 杠 
02 单 击 “存储 ”按钮 ， 弹 出 “将 优化 结果 存储 为 ”对 话 框 ， 在 对 话 框 中 设置 保存 的 位 置 和 名 称 ， 如 图 10-8 所 示 。 


03 单 击 “保存 ”按钮 ， 同 时 创建 一 个 文件 夹 ， 用 于 保存 各 个 切片 生成 的 文件 。 双 击 index.html 文 件 打 开 Web 页 面 ， 效 果 如 图 10-9 所 示 。 
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4108 保存 图 像 
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图 10-9 浏览 Web 页 面 
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在 保存 编辑 过 的 图 像 时 ， 有 两 种 保存 图 像 的 方式 一 一 “存储 为 ”和 “存储 为 Web 所 用 格式 ”。 下 面 将 介绍 两 种 格式 的 区 别 。 


网 站 设计 中 会 运用 到 图 像 设计 ， 很 多 图 像 的 格式 处 理 是 非常 需要 注意 的 ， 图 像 格式 关系 到 图 像 的 大 小 ， 而 图 像 大 小 占 网 页 大 小 非常 大 的 一 部 分 ， 所 以 网 页 设计 中 的 图 像 大 小 关系 到 网 站 的 打开 速度 ， 在 
制作 网 页 的 过 程 是 需要 严格 注重 的 。 
(1) GIF 图 像 格式 ，GIF 是 一 种 调 色 板 型 (palette type) (或 者 说 是 索引 型 ) 的 图 像 。 它 含有 多 达 256 种 颜色 。 每 一 个 像素 点 都 有 一 个 对 应 的 颜色 值 。 因 为 这 种 格式 不 再 存在 专利 权 的 问题 。 


GIF 是 一 种 无 损 压 缩 的 格式 ， 这 意味 着 当 你 修改 并 且 保 存 了 图 像 的 时 候 ， 它 的 质量 不 会 有 任何 损耗 。 

GIF 格式 也 支持 动画 。 在 黑暗 的 Web 1.0 时 代 ， 它 导致 了 大 量 多 余 的 县 花 一 现 的 “新 ”图 像 (blinking “пем” images) 、 循 环 的 @ 符 号 (rotating@signs) 、birds dropping, а email 以 及 其 他 一 些 
让 人 厌烦 的 东西 的 出 现 。 在 更 加 文明 的 Web 2.0 时 代 ， 在 等 待 一 个 更 新 页 面 的 ajax 请 求 的 时 候 ， 我 们 仍然 会 看 到 “loading” 动 画 ， 但 是 也 有 一 些 比较 讨 人 喜欢 的 东西 ， 人 们 喜欢 把 它们 放 在 自己 的 网 络 上 。 
不 管 怎么 说 ， 如 果 你 有 需要 ， 就 可 以 使 用 动画 支持 。 

GIF 也 支持 透明 度 ， 透 明度 的 值 是 一 种 布尔 类 型 数据 。GIF 图 像 里 的 一 个 像素 要 么 完全 透明 ， 要 么 完全 不 透明 。 

(2) PNG 图 像 格式 ，PNG 的 图 像 又 分 为 PNG-8、PNG-24 两 种 ， 其 中 ，PNG-8 与 GIF 类 似 ， 支 持 256 色 调 色 板 ， 而 PNG-24 只 支持 48 位 真 彩色 ， 凡 是 GIF 拥有 的 优势 PNG-8 都 拥有 ，GIF 所 没有 的 优势 
PNG-8 也 有 。 同 样 的 文件 ，PNG-8 格 式 比 GIF 要 小 ，PNG-8 的 特点 使 得 它 在 网 站 设计 切 图 环节 深 受 网 站 设计 师 的 喜爱 。PNG 可 以 以 任何 颜色 深度 存储 图 像 ， 也 支持 高 级 别 的 无 损耗 压缩 、 支 持 伽 马 校正 、 支 
持 交 错 ， 受 最 新 Web 浏 览 器 的 支持 ， 能 够 提供 长 度 比 GIF 小 30% 的 无 损 压 缩 图 像 文件 ， 最 高 支持 48 位 真 彩色 图 像 以 及 16 位 灰 度 图 像 、 渐 近 显 示 和 流 式 读 写 ， 不 足 的 是 较 旧 的 浏览 器 和 程序 可 能 不 支持 PNG 文 
件 。 

(3) JPEG 图 像 格式 ， 是 目前 网 络 上 最 流行 的 图 像 格式 ， 是 可 以 把 文件 压缩 到 最 小 的 格式 ， 在 Photoshop 软 件 中 以 JPEG 格 式 储存 时 ， 提 供 11 级 压缩 级 别 ， 以 0 一 10 级 表示 。 其 中 0 级 压缩 比 最 高 ， 图 像 
品质 最 差 。 即 使 采用 细节 几乎 无 损 的 10 级 质量 保存 时 ， 压 缩 比 也 可 达 5: 1。 以 BMP 格式 保存 时 得 到 4.28MB 的 图 像 文 件 ， 在 采用 JPG 格 式 保存 时 ， 其 文件 仅 为 178KB， 压 缩 比 达 到 24: 1。 经 过 多 次 比较 ， 采 
用 第 8 级 压缩 为 存储 空间 与 图 像 质 量 兼 得 的 最 佳 比例 。JPEG 格 式 的 应 用 非常 广泛 ， 特 别 是 在 网 络 和 光盘 读物 上 ， 都 能 找到 它 的 身影 。 目 前 各 类 浏览 器 均 支 持 JPEG 这 种 图 像 格式 ， 因 为 JPEG 格 式 的 文件 尺寸 较 
小 ， 下 载 速 度 快 。 

(4) BMP 图 像 格 式 ，BMP 是 英文 Btmap (UE) 的 简写 ， 它 是 Windows 操 作 系 统 中 的 标准 图 像 文 件 格式 ， 在 Windows 环 境 下 运行 的 所 有 图 像 处 理 软件 都 支持 BMP 图 像 文 件 格式 。Windows 系 统 内 
部 各 图 像 绘制 操作 都 是 以 BMP 为 基础 的 。 随 着 Windows 操 作 系统 的 流行 与 丰富 的 Windows 应 用 程序 的 开发 ，BMP 位 图 格式 理所当然 地 被 广泛 应 用 。 这 种 格式 的 特点 是 包含 的 图 像 信息 较 丰 富 ， 几 乎 不 进行 


压缩 ， 但 由 此 导致 了 它 与 生 俱 来 的 缺点 一 占用 磁盘 空间 过 大 。 所 以 ， 目 前 BMP 在 单机 上 比较 流行 。BMP 位 图 文件 默认 的 文件 扩展 名 是 BMP 或 者 bmp (有 时 它 也 会 以 .DIB 或 .RLE 作 扩展 名 ) 。 


(5) TGA 图 像 格 式 ，TGA 的 结构 比较 简单 ， 属 于 一 种 图 形 、 图 像 数据 的 通用 格式 ， 在 多 媒体 领域 有 着 很 大 影响 ， 在 做 影视 编辑 时 经 常 使 用 ， 例 如 3DS MAX 输 出 TGA 图 像 序列 导入 到 AE 里 面 进行 后 期 编 


10.22 Е 


优化 图 像 就 是 在 提高 图 像 质量 的 同时 ， 使 图 像 存 储 所 占用 的 空间 尽 可 能 地 小 。 可 以 选择 菜单 栏 中 的 “文件 ”| “存储 为 Web 所 用 格式 ”命令 来 完成 对 图 像 的 优化 工作 。 


“存储 为 Web 所 用 格式 ”没有 像 “存储 为 ”命令 那样 提供 很 多 种 保存 图 像 文件 的 格式 选择 ， 但 是 它 为 每 种 支持 的 格式 提供 了 更 灵活 的 设置 ， 如 图 10-10 所 示 。 
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810-10 “存储 为 Web 所 用 格式 ”对 话 框 


“存储 为 Web 所 用 格式 ”目的 是 输出 展示 在 网 页 上 的 图 像 ， 保 存 的 主要 目的 之 一 是 在 维持 图 像 质量 的 同时 尽 可 能 地 缩小 文件 体积 。 


10.3 创建 GIF 动画 


动画 是 在 一 段 时 间 内 显示 的 一 系列 图 像 或 帧 ， 当 每 一 帧 较 前 一 帧 都 有 轻微 的 变化 时 ， 连 续 快 速 地 显示 帧 ， 就 会 产生 运动 或 其 他 变化 的 视觉 效果 。 


10.3.1 认识 “动画 ”面板 


GIF 动画 制作 相对 较为 简单 。 打 开 “ 动 画 ” 面板 后 ， 会 发 现 有 帧 动画 模式 和 时 间 轴 动画 两 种 模式 可 以 选择 。 


帧 动画 相对 来 说 直观 很 多 ， 在 “动画 ( 帧 ) ”面板 中 会 看 到 每 一 帧 的 缩 略图 。 制 作 之 前 需要 先 设 定好 动画 的 展示 方式 ， 然 后 用 Photoshop 做 出 分 层 图 。 再 在 “动画 ( 帧 ) ”面板 新 建 帧 ， 把 展示 的 动画 
分 帧 设置 好 ， 再 设 定好 时 间 和 过 渡 等 即 可 播放 预览 


在 帧 动画 的 所 有 元 素 都 放置 在 不 同 的 图 层 中 。 通 过 对 每 一 帧 隐藏 或 显示 不 同 的 图 层 可 以 改变 每 一 帧 的 内 容 ， 而 不 必 一 遍 又 一 遍地 复制 和 改变 整个 图 像 。 每 个 静态 元 素 只 需 创建 一 个 图 层 即 可 ， 而 运动 元 
素 则 可 能 需要 若干 个 图 层 才 能 制作 出 平滑 过 渡 的 运动 效果 。 如 图 10-11 所 示 为 帧 “动画 (їй) ”面板 。 


时 间 轴 动画 相对 来 说 要 专业 很 多 ， 有 点 类 似 Flash 及 一 些 专业 影视 制作 软件 。 同 样 ， 在 制作 之 前 ， 需 要 设 定好 动画 的 展示 方式 ， 再 做 出 分 层 图 层 。 然 后 在 时 间 轴 设置 各 层 的 展示 位 置 及 动画 时 间 等 。 如 图 
10-12 所 示 为 “动画 (时 间 轴 ) ”面板 。 


ШИЕ 


310-11 “动画 (їй) ”面板 


图 10-12 “时 间 轴 ”面板 


GIF 动画 是 较为 常见 的 网 页 动画 。 这 种 动画 的 特点 : 它 是 以 一 组 图 像 的 连续 播放 来 产生 动态 效果 ， 该 动画 是 没有 声音 的 。 当 然 制作 GIF 动画 的 软件 有 很 多 ， 最 常用 的 就 是 Photoshop， 下 面 使 用 
Photoshop 制 作 如 图 10-13 所 示 的 3 帧 动画 ， 具 体操 作 步 骤 如 下 。 


图 10-13 3 帧 动画 


01 选择 菜单 栏 中 的 “文件 ”|“ 打 开 ” 命 令 ， 将 素材 hl.jpg 打 开 ， 如 图 10-14 所 示 。 


02 ”选择 菜单 栏 中 的 “窗口 ”| “时间 轴 ”命令 ， 打 开 “ 时 间 轴 ”面板 ， 在 “时 间 轴 ”面板 中 自动 生成 一 帧 动画 ， 选 择 菜单 栏 中 的 “窗口 ”| “图 层 ” 命 令 ， 打 开 “ 时 间 轴 ”面板 ， 如 图 10-15 所 示 。 
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图 10-14 ”打开 文件 
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图 10-15 ”打开 “时 间 轴 ”面板 


单 击 “图 层 ”面板 中 的 背景 ， 双 击 “ 背 景 ”图 层 ， 将 “背景 ”图 层 转 为 “图 层 0”， 如 图 10-16 所 示 。 
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10-17 复制 当前 帧 


使 用 同样 的 方法 再 复制 一 个 帧 ，“ 时 间 轴 ”面板 如 图 10-18 所 示 。 


图 10-18 ”再 复制 一 个 帧 


选择 菜单 栏 中 的 “文件 ”|“ 置 入 ”命令 ， 弹 出 “ 置 入 ”对 话 框 ， 在 对 话 框 中 选择 要 置 入 的 文件 h2.jpg， 如 图 10-19 所 示 。 单 击 “ 置 入 ”命令 ， 将 h2 文 件 置 入 ， 并 调整 置 入 文件 的 大 小 与 原来 的 背景 图 
像 一 样 ， 如 图 10-20 所 示 。 
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910-19 ”选择 文件 h2 
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图 10-20” 置 入 文件 并 调整 大 小 
使 用 同样 的 方法 置 入 h3.jpg， 如 图 10-21 所 示 。 


在 “时 间 轴 ”面板 中 选择 第 1 帧 ， 单 击 该 帧 右 下 角 的 三 角 按钮 设置 延迟 时 间 为 1 秒 ， 在 “图 层 ” 面 板 中 ， 将 h2 和 h3 图 层 隐 藏 ， 图 层 0 可 见 ， 如 图 10-22 所 示 。 
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图 10-22 ”设置 第 1 帧 状态 


用 同样 的 方法 设置 第 2 帧 的 延迟 为 1 秒 ， 在 “图 层 ” 面 板 中 ， 将 图 层 0 和 h3 图 层 隐藏 ，h2 可 见 ， 如 图 10-23 所 示 。 


设置 第 3 帧 的 延迟 为 1 秒 ， 在 “图 层 ” 面板 中 ， 将 图 层 0 和 h2 图 层 隐 藏 ， h3 可 见 ， 如 图 10-24 所 示 。 
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图 10-23 设置 第 2 帧 状态 
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图 10-24 设置 第 3 帧 状态 


1 Ф "а (№) ”面板 底部 的 “播放 动画 ” gy 将 播放 方式 设置 为 “永远 ”， 效 果 如 图 10-25 所 示 。 
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图 10-25 ”播放 动画 


选择 菜单 栏 中 的 “文件 |“ 存储 为 Web 所 用 格式 ”命令 ， 弹 出 “存储 为 Web 所 用 格式 ”对 话 框 ， 选 择 GIF 方式 输出 图 像 ， 如 图 10-26 所 示 。 


02 ” 单 击 “存储 ”按钮 ， 弹 出 “将 优化 结果 存储 为 ”对 话 框 ， 在 对 话 框 中 设置 名 称 为 “donghua.gif”， 格 式 选择 “ 仅 限 图 像 ”， 单 击 “ 保 存 ” 按 钮 即 可 保存 图 像 ， 如 图 10-27 所 示 。 
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图 10-26 选择 GIF 方式 输出 图 像 
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图 10-27 保存 图 像 


104 技能 训练 


企业 网 站 首页 
ЕРИ ромеи 


下 面 使 用 Photoshop 制 作 企业 网 站 首页 ， 如 图 10-28 所 示 ， 有 具体 操作 步骤 如 下 
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图 10-28 企业 网 站 首页 
01 选择 菜单 栏 中 的 “文件 ”| “新建 ”命令 ， 打 开 “ 新 建 ” 对 话 框 ， 在 该 对 话 框 中 将 “宽度 ”设置 为 1000，“ 高 度 ” 设 置 为 600， 如 图 10-29 所 示 。 


02 “ 单 击 “确定 ”按钮 ， 新 建 空白 文档 ， 如 图 10-30 所 示 。 
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810-29 “新建 ”对 话 框 
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10-30 ”新 建 空白 文档 


03 ”选择 工具 箱 中 的 矩形 工具 ， 在 姓 台 中 绘制 矩形 ， 如 图 10-31 所 示 。 


04 选择 菜单 栏 中 的 “图 层 ”| “图 层 样 式 ”| “渐变 倒 加 ”命令 ， 打开“ 图 层 样式 ”对 话 框 ,设置 渐变 县 加 顾 色 ， 如 图 10-32 所 示 。 
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图 10-32 ”选择 样式 


05 单 击 “ 确 定 ” 按 钮 ， 设置 图 层 样式 ， 如 图 10-33 所 示 。 


06 选择 工具 箱 中 的 横 排 文字 工具 ， 在 舞台 中 输入 文本 “设置 为 首页 | 家 人 收藏 ”， 如 图 10-34 所 示 。 
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图 10-33 ”设置 图 层 样 式 
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图 10-34 输入 文本 


07 ”选择 矩形 工具 ， 在 选项 栏 中 将 填充 颜色 设 为 #34381d， 绘 制 矩 形 ， 如 图 10-35 所 示 。 


08 ”选择 工具 箱 中 的 自 定 义 形 状 工具 ， 在 选项 栏 中 将 “填充 颜色 ”设置 为 #ffttff， 单 击 “形状 ”右边 的 下 拉 按 钮 ， 在 弹出 的 列表 中 选择 形状 ， 如 图 10-36 所 示 。 
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图 10-36 ”选择 形状 
09 在 舞台 中 按 住 鼠 标 左 键 绘制 形状 ， 如 图 10-37 所 示 。 


10 选择 工具 箱 中 的 横 排 文字 工具 ， 在 姓 台 中 输入 相应 的 文本 ， 如 图 10-38 所 示 。 
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图 10-37 ”绘制 形状 
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10-38 输入 文本 
11 选择 “文件 ”|“ 置 入 ”命令 ， 打 开 “ 置 入 ”对 话 框 ， 选 择 文件 2.jpg， 如 图 10-39 所 示 。 


12 “ 单 击 “ 置 入 ”按钮 ， 置 入 图 像 文件 ， 效 果 如 图 10-40 所 示 。 
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10-41 绘制 矩形 
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图 10-42 ”设置 渐变 颜色 
15 单 击 “ 确 定 ” 按 钮 ， 设 置 图 层 样式 。 选 择 工具 箱 中 的 “直线 ”工具 ， 在 选项 栏 中 将 “粗细 ”设置 为 1， 在 舞台 中 绘制 直线 ， 如 图 10-43 所 示 。 


16 同步 骤 15 绘 制 其余 的 直线 ， 效 果 如 图 10-44 所 示 。 
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810-43 ”绘制 矩形 
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10-44 绘制 其 余 的 直线 


选择 工具 箱 中 的 横 排 文字 工具 ， 在 舞台 中 输入 相应 的 文本 ， 效 果 如 图 10-45 所 示 。 
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910-45 输入 文本 


TBanner 动 画 


本 实例 使 用 Photoshop 制 作 Banner 动 画 ， 如 图 10-46 所 示 ， 有 具体 操作 步骤 如 下 。 
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图 10-46 Banner2J =, 


01 ”选择 菜单 栏 中 的 “文件 ”| “打开 ”命令 ， 将 素材 picl.jpg 打 开 ， 如 图 10-47 所 示 。 


02 ”选择 菜单 栏 中 的 “窗口 ”| “时 间 轴 ” 命令 ， 打 开 “ 时 间 轴 ”面板 ， 在“ 时间 轴 ”面板 中 自动 生成 一 帧 动画 ， 选 择 菜单 栏 中 的 “窗口 ”| “НА” 命令， 打开 “时 间 轴 ”面板 ， 如 图 10-48 所 示 。 
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810-47 打开 文件 
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图 10-48 打开 “时 间 轴 ”面板 


03 单 击 “ 图 层 ” 面 板 中 的 背景 ， 双 击 “ 背 景 ”图 层 ， 将 “背景 为 “图 层 9”， 如 图 10-49 所 示 。 


T a 
Е ”一 次 


05 ”选择 菜单 栏 中 的 “文件 ”|“ 置 入 ”命令 ， 弹 出 “ 置 入 ”对 话 框 ， 在 对 话 框 中 选择 要 置 入 的 文件 pic2.jpg， 如 图 10-51 所 示 。 


10-51 “Жл” HEHE 


06 单 击 “ЖА” 命令 ， 将 pic2 文 件 置 入 ， 并 调整 置 入 文件 的 大 小 与 原来 的 背景 图 像 一 样 大 小 ， 如 图 10-52 所 示 。 


07 在 “时 间 轴 面板 中 选择 第 1 帧 ， 单 击 该 帧 右 下 角 的 三 角 按 钮 设置 延迟 时 间 为 0.5 秒 ,在 “图 层 ” 面板 中 ， 将 pic 2.jpg 图 层 隐藏 ， 图 层 0 可 见 ， 如 图 10-53 所 示 。 


РНР О Ро Ве: Hm ERO AAT Mm вы 
А № Бо № 952955 Фа H: м дом m ipa pz = 


ТЕШ я E Fee 
ри? ура 家 10035 (ри 


үч, 
Қз 


mita; me EE 


қ h “4 4 | Жы, н á ы 


шаш 
K: 
 — 


8. 


| 1 - та | 
М ыны Т! | 
| ДЕ? | ј 


ЕВ КИ АНА 
110-52 置 入 文件 并 调整 大 小 


Ба жена за ЕП ШІН, жү) BEES] ВӘТ) 
ВЖ: 18 е трах: ЕЕЕ 


пе ра m 1005. ЕП БОЕ" > 


TAL ети 


# 10-53 ”设置 第 1 帧 状态 


用 同样 的 方法 设置 第 2 帧 的 延迟 为 0.5 秒 ， 在 “图 层 ”面板 中 ， 将 图 层 0 隐 藏 ，pic 2.jpg 图 层 可 见 ， 如 图 10-54 所 示 。 


въ AE (їй) ”面板 底部 的 “播放 动画 pa sas, 将 播放 方式 设置 为 “永久 ”， 如 图 10-55 所 示 。 
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910-54 设置 第 2 帧 状态 
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110-55 ”播放 动画 
选择 菜单 栏 中 的 “文件 ”| “存储 为 Web 所 用 格式 ”命令 ， 弹 出 “存储 为 Web 所 用 格式 ”对 话 框 ， 选 择 GIF 方 式 输出 图 像 ， 如 图 10-56 所 示 。 


单 击 “ 存 储 ” 按 钮 ， 弹 出 “将 优化 结果 存储 为 ”对 话 框 ， 在 对 话 框 中 设置 名 称 为 “banner.gif”， 格 式 选择 “ 仅 限 图 像 ”， 单 击 “ 保 存 ” 按 钮 即 可 保存 图 像 ， 如 图 10-57 所 示 。 
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10-56 ”选择 GIF 方式 输出 图 像 
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图 10-57 保存 图 像 


第 11 章 ”Photoshop 网 页 图 像 设计 


广泛 的 领域 就 是 图 形 和 图 像 的 处 理 ， 这 里 所 说 的 图 形 是 指 自己 绘制 出 来 的 ;而 图 像 的 处 理 指 的 是 对 一 幅 已 经 有 的 图 片 进行 处 理 。 这 一 章 中 的 每 个 实例 都 使 用 了 Photoshop 不 同 的 功 


Photoshop 用 得 最 
和 提高 。 此 外 ，Photoshop 所 提供 的 应 用 于 网 页 图 片 的 切片 工具 ， 能 够 将 图 像 分 割 为 具有 链接 功能 的 图 像 区 。 本 章 主 要 讲述 了 网 页 中 的 Logo 制 


能 ， 和 希望 读者 在 学 习 的 时 候 能 够 不 断 总 结 ， 以 最 快 的 速度 进步 
作 、 网 络 Banner 制 作 和 网 站 导航 按钮 的 制作 ， 以 及 常见 文字 特效 的 设计 。 
本 章 重 点 

. 网 站 Logo 的 制作 

. 网 站 Bannet 的 制作 

Ж 网 站 按钮 的 制作 

. 导航 条 的 制作 


` 常见 的 文字 特效 设计 


111 网 站 Logo 的 制作 


网 站 Logo， 即 网 站 标志 ， 一 般 出 现在 站 点 的 每 一 个 页 面 上 ， 是 网 站 给 人 的 第 一 印象 ，Logo 是 吸引 流量 的 法 宝 之 一 ， 一 个 成 功 有 效 的 Logo 能 很 轻松 地 让 网 友 记 住 你 的 网 站 ， 当 网 友 在 浏览 同类 网 站 的 时 
候 ， 脑 海里 会 自然 浮现 你 的 网 站 Logo。 到 那 时 ， 网 友 便 会 不 自觉 地 去 寻找 你 的 网 站 。 


下 面 利 用 Photoshop 设 计 如 图 11-1 所 示 的 网 站 Logo， 具 体操 作 步 又 如 下 。 


图 11-1 网 站 Logo 


01 ”打开 Photoshop CC， 选 择 菜单 栏 中 的 “文件 ”|“ 新 建 ”命令 ， 弹 出 “新 建 ” 对 话 框 ， 在 该 对 话 框 中 将 “宽度 ”设置 为 500 像 素 ，“ 高 度 ” 设 置 为 400 像 素 ，“ 背 景 内 容 ” 设 置 为 “和 白色”， 如 图 11-2 
所 示 。 


02 单 击 “ 确 定 ” 按 钮 ， 新 建文 档 ， 如 图 11-3 所 示 。 
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图 11-2 “新 建 ” 对 话 框 
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11-3 HEHE 


03 ”选择 工具 箱 中 的 “椭圆 工具， 在 工具 选项 栏 中 将 填充 颜色 设置 为 #79c471， 在 文档 中 绘制 一 个 椭圆 ， 如 图 11-4 所 示 。 


04 KHER HEP “HE | “图 层 样 式 ”| “投影 ”命令 ， 打 开 “ 图 层 样 式 ” 对 话 框 ， 如 图 11-5 所 示 的 形状 。 


05 单 击 “ 确 定 ” 按钮 ， 设置 图 层 样 式 ， 如 图 11-6 所 示 。 


06 选择 工具 箱 中 的 “ 自 定义 形状 ”工具 ， 在 选项 栏 中 单 击 “形状 ”右边 的 下 拉 按 钮 ， 在 弹出 的 列表 中 选择 相应 的 形状 ， 如 图 11-7 所 示 。 
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图 11-4 绘制 正 圆 
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4115 “图 层 样式 ”对 话 框 
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图 11-6 ”设置 图 层 样式 
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图 11-7 ”选择 形状 
在 选项 栏 中 将 填充 颜色 设置 为 #005414， 将 描 边 颜色 设置 为 白色 ， 描 边 大 小 设置 为 5， 在 舞台 中 绘制 形状 ， 效 果 如 图 11-8 所 示 。 


选择 工具 箱 中 的 横 排 文字 工具 ， 在 三 台中 输入 文字 “温馨 家 园 ”， 如 图 11-9 所 示 。 
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11-8 ”绘制 形状 
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图 11-9 输入 文本 
09 选择 菜单 栏 中 的 “图 层 ”| “图 层 样 式 ” |“ 混合 选项 ”命令 ， 弹 出 “图 层 样式 ”对 话 框 ， 在 对 话 框 中 单 击 “ 样 式 ”， 在 弹出 的 列表 中 选择 合适 的 样式 ， 如 图 11-10 所 示 。 


10 ра 确定” 按钮， 设置 图 层 样式 ， 如 图 11-11 所 示 。 


неге 


混合 选项 : 自 定 
ГІНЕН ЕЁ 
O е} 

Г] 
ШЕ Н 
ГІНЕ; 
ПОР 
ГІЗБЕ 
O те 
ШЕ 
Г1 ЕШ 
МЗ: 
148: 


111-10 


“图 层 样 式 ” 对 话 框 
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911-11 设置 图 层 样式 


Banner 是 网 站 页 面 的 横幅 广告 ，Banner 主 要 体现 中 心意 旨 ， 形 象 鲜明 地 表达 最 主要 的 情感 思想 或 宣传 中 心 。 下 面 讲述 如 何 使 用 Photoshop 制 作 GIF 格 式 的 Banner 动 画 ， 效 果 如 图 11-12 所 示 ， 有 具体 操作 
步骤 如 下 。 
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图 11-12 ”Bannet 动 画 


选择 菜单 栏 中 的 “文件 ”| “打开 ”命令 ， 打 开 素 材 t4.jpg， 如 图 11-13 所 示 。 


2 在 “图 层 ” 面 板 中 双击 “背景 ”图 层 ， 将 “背景 ”图 层 转 为 “图 层 0”， 如 图 11-14 所 示 。 
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图 11-14 将 “背景 ”图 层 转 为 “图 层 0” 
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411-15 复制 当前 帧 


04 选择 菜单 栏 中 的 “文件 |“ 置 入 ”命令 ， 弹 出 “ 置 入 ”对 话 框 ， 在 对 话 框 中 选择 要 置 入 的 文件 65.jpg， 如 图 11-16 所 示 。 


05 单 击 “ 置 入 ”命令 ,将 图 像 文 件 置 入 ， 并 调整 置 入 文件 的 大 小 与 原来 的 图 像 同样 大 ， 如 图 11-17 所 示 。 
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图 11-18 图 层 0 可 见 
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911-19 ”设置 第 2 帧 状态 


жж AE (В) ”面板 底部 的 “播放 动画 ”按钮 > 播放 动画 ， 即 可 预览 动画 ， 单 击 “ 一 次 ”， 在 弹出 的 列表 中 选择 “永远 ”选项 ， 如 图 11-20 所 示 。 
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弹出 “存储 为 Web 所 用 格式 ” 


对 话 框 ， 在 对 话 框 中 设置 名 称 为 bannet.gif， 格 式 选 择 “ 仅 限 图 像 ” 
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о 选择 “永远 ”选项 
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k Ж 


对 话 框 ， 选 择 GIF 方 式 输出 图 像 ， 如 图 11-21 所 示 。 
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+: 一 же! 一 


选择 GIF 方式 输出 图 像 


， 单 击 “ 保 存 - 


即 可 保存 图 像 ， 如 图 11-22 所 示 。 
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61122 ”保存 图 像 


113 ”网 站 按钮 的 制作 


漂亮 的 按钮 可 以 修饰 网 页 ， 能 够 使 得 网 页 图 像 更 加 美观 、 更 富 立 体感 。 按 钮 是 网 站 路 标 ， 它 是 十 分 重要 的 。 按 钮 应 放置 到 明显 的 页 面 位 置 ， 让 浏览 者 在 第 一 时 间 内 看 到 它 并 做 出 判断 ， 确 定 要 进入 哪个 
栏目 中 去 搜索 他 们 所 要 的 信息 。 


下 面 使 用 Photoshop 设 计 如 图 11-23 所 示 的 按钮 ， 具 体操 作 步 骤 如 下 。 


811-23 ж 


01 ”打开 素材 文件 ， 如 图 11-24 所 示 。 


02 在 工具 箱 中 选择 圆 角 算 形 工具 ， 按 住所 标 左 键 同时 拖 动 氛 标 绘制 一 个 圆 角 和 矩形 ， 如 图 11-25 所 示 。 


图 11-24 打开 图 像 文件 
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图 11-25 И Я 


选择 菜单 栏 中 的 “窗口 ”| “和 样式” 命令， 打开 “样式 ”面板 ， 如 图 11-26 所 示 。 


在 “样式 ”面板 中 选择 一 种 样式 ， 对 椭圆 按钮 应 用 该 样式 ， 如 图 11-27 所 示 。 
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911-26 ”打开 “样式 ”面板 


91127 应 用 样式 


05 选择 工具 箱 中 的 横 排 文字 工具 ， 在 椭圆 上 输入 中 文 文字 ， 在 工具 栏 中 将 “字体 ”设置 为 “黑体 ”，“ 大 小 ”设置 为 24 点 ， 如 图 11-28 所 示 。 


选择 菜单 栏 中 的 “文件 ”| “存储 为 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 存 储 文件 ， 如 图 11-29 所 示 。 


图 11-28 ”输入 文本 
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11-9 “另存 为 ”对 话 框 


114 ”导航 条 的 制作 


在 网 页 设计 中 ， 经 常用 到 导航 按钮 进行 超 链 接 ， 由 于 导航 按钮 形式 多 样 ， 因 此 只 要 合理 应 用 ， 就 会 极 大 地 美化 网 页 。 


下 面 使 用 Photoshop 设 计 如 图 11-30 所 示 的 导航 按钮 ， 具 体操 作 步 又 如 下 。 


首页 | 公司 简介 | 公司 新 闻 x 产品 展示 | 网 络 营销 联系 我 们 客户 留言 


图 11-30 ”导航 按钮 
01 ”打开 Photoshop CC， 选 择 菜单 栏 中 的 “文件 |“ 新建 ”命令 ， 弹 出“ 新建” 对 话 框 ,设置 完 后 单 击 “ 确 定 ” 按 钮 ， 如 图 11-31 所 示 。 


02 在 工具 箱 中 选择 矩形 工具 ， 并 按 住所 标 左 键 不 放 在 工作 区 拖 出 一 个 矩形 ， 如 图 11-32 所 示 。 
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图 11-31 “新建” 对话 框 
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11-32 ”绘制 矩形 
选择 菜单 栏 中 的 “图 层 | “БАЖА” | 投影 命令， 弹出 “图 层 样式 ”对话 框 ， 如 图 11-33 所 示 。 


| 在 “图 层 样式 ”对 话 框 中 单 击 匀 选 左 侧 的 “渐变 县 加 ”选项 ， 在 该 对 话 框 中 单 击 “点 按 可 编辑 渐变 ”按钮 打开“ 渐变 编辑 器 ”对 话 框 ， 在 该 对 话 框 中 设置 渐变 颜色 ， 设 置 完毕 单 击 “ 确 定 ” 按 
АИ, 如 图 11-34 所 示 。 
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图 11-33 “图 层 样式 ”对 话 框 
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11-34 设置 渐变 颜色 
05 单 击 “ 确 定 ” 按 钮 ， 设 置 渐变 颜色 ， 如 图 11-35 所 示 。 


06 选择 工具 箱 中 的 “直线 ”工具 ， 在 选项 栏 中 将 填充 颜色 设置 为 白色 ,在 给 形 上 面 绘制 直线 ， 如 图 11-36 所 示 。 
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911-35 设置 渐变 颜色 
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811-36 绘制 直线 
07 ”同步 又 6 绘制 出 另外 5 条 直线 ， 如 图 11-37 所 示 。 


08 ”选择 工具 箱 中 的 横 排 文字 工具 ， 在 选项 栏 中 设置 文本 的 大 小 和 颜色 ， 在 性 台中 输入 相应 的 导航 文本 ， 如 图 11-38 所 示 。 
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图 11-38 输入 文字 


11.5 “技能 训练 一 “常见 的 文字 特效 设计 


网 页 特效 文字 就 是 将 文字 图 形 化 ， 即 把 文字 作为 图 形 元 素来 表现 。 作 为 网 页 设计 者 ， 既 可 以 按照 常规 的 方式 来 设置 字体 ， 也 可 以 对 字体 进行 艺术 化 的 设计 。 将 文字 图 形 化 ， 以 更 富 创意 的 形式 表达 出 深 


层 的 设计 思想 ， 能 够 克服 网 页 的 单调 与 平淡 ， 从 而 打动 人 心 。 


本 例 制作 的 浮雕 文字 如 图 11-39 所 示 。 具 体操 作 如 下 。 
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11-39 ”浮雕 文字 
ОТ ”选择 菜单 栏 中 的 “文件 | 打开 ” 命令， 打开 图 片 文件 “wz.jpg”， 如 图 11-40 所 示 。 


)2 ”选择 工具 箱 中 的 横 排 文字 工具 ， 输 入 文字 “全 场 3 折 ”， 然 后 在 工具 选项 栏 上 设置 字体 为 微软 雅 黑 ， 字 号 为 120， 如 图 11-41 所 示 。 
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911-40 ”打开 果冻 字 .jpg 
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图 11-41 输入 文字 


及， 选择 菜单 栏 中 的 “图 层 | “图 层 样式 ”| “投影 ”命令 ， 弹 出 “图 层 样式 ”对 话 框 ， 在 对 话 框 中 进行 如 图 11-42 所 示 设 置 。 


04 ”给 文字 添加 内 阴影 样式 ， 参 数 设置 如 图 11-43 所 示 。 
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61142 ”设置 投影 样式 
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11-43 ”设置 内 阴影 样式 


05 ”给 文字 添加 外 发 光 样 式 ， 参 数 设置 如 图 11-44 所 示 。 


06 


给 文字 添加 渐变 又 加 样式 ， 参 数 设置 如 图 11-45 所 示 。 
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图 11-44 设置 外 发 光 样 式 


ЕЕРЕЕ 
АТА 
职 消 
"a 
nT | 


| 新建 样式 (W)..， 


TAIL) 


_ ЯГ ЖЕЛП 
a= 


Ук î JALO ВАДА 


E RARAC): Ope 


НІ кегін ”新建 样式 (W)..， | 
此 
O HE зам) 


м НО: НЕО 
F] ERR: aew: (1) ДЕ | „1 


O ж Ж 
Dež mo: —— [m 1% 


EE ` HEEE | | FEMA | 


一 = 
== 


O Е ЗЕ 
2 
М es 


图 11-45 RIE EFEX 
07 ”给 文字 添加 斜面 和 浮雕 样式 ， 参 数 设置 如 图 11-46 所 示 。 


08 单 击 “ 确 定 ” 按钮， 设置 文字 浮 点 效果 ， 如 图 11-47 所 示 。 
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11-46 Жи de ЛЕНД 
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立体 字 在 文字 制作 中 有 着 独特 的 视觉 效果 ， 而 立体 字 在 网 页 中 又 独 具 魅 力 。 下 面 制作 一 个 立体 多 彩 字 ， 如 图 11-48 所 示 。 具 体操 作 步 骤 如 下 。 
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图 11-48 ZF 


01 ”选择 菜单 栏 中 的 “文件 ”| “打开 ”命令 ， 打 开 图 片 文 件 Itjpg， 如 图 11-49 所 示 。 


02 ”选择 工具 箱 中 的 横 排 文字 工具 ， 输 入 文字 “年 货 盛 惠 ”， 然 后 在 工具 选项 栏 上 设置 字体 为 “黑体 ”， 字 号 为 72， 如 图 11-50 所 示 。 


НІН МЕНЕ ве Шеп! Жүгү) РГУ] 


- B ABA ТЕ = ЕР 


ғ = М қ Р Е 
еті i Ен Е 
l = + 


ü 43 
КК ТМ 


взели 


411-49 ”打开 图 片 文件 


811-50 输入 文字 


在 “图 层 ” 面板 中 将 文本 图 层 拖 动 到 “创建 新 图 层 ” 按 钮 上 ， 生 成 “年 货 盛 惠 拷贝 ”图 层 ， 如 图 11-51 所 示 。 


选择 底层 “年 货 盛 惠 ”， 选 择 菜单 栏 中 的 “图 层 ”| “REFN | “投影 ”命令 ,弹出 “图 层 样 式 ”对 话 框 ， 如 图 11-52 所 示 。 
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图 11-52 “图 层 样式 ”对 话 杠 


05 单 击 “ 确 定 ” 按钮 ， 设置 图 层 样 式 ， 如 图 11-53 所 示 。 


06 选择 底层 “年 货 盛 惠 找 贝 ”， 选 择 菜 单 栏 中 的 “图 层 ”|“ 图 层 样式 ”|“ 渐 交 县 加 ”命令 ， 弹 出 “图 层 样式 ”对 话 框 ， 如 图 11-54 所 示 。 
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图 11-53 设置 图 层 样式 
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图 11-54 “图 层 样式 ”对 话 框 
07 ”在 该 对 话 框 中 单 击 “渐变 ”按钮 ， 弹 出 “渐变 编辑 器 ”对 话 框 ， 在 该 对 话 框 中 设置 渐变 颜色 ， 如 图 11-55 所 示 。 


8 单 击 “确定 ”按钮 ， 设 置 图 层 样式 ， 将 文本 向 右 移动 一 段 时 间 ， 如 图 11-56 所 示 。 
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图 11-56 “移动 文本 


在 网 页 制作 中 ，Javascript 是 常见 的 脚本 语言 ， 它 可 以 嵌入 到 HTML 中 ， 在 客户 端 执行 ， 是 动态 特效 网 页 设计 的 最 佳 选 择 ， 同 时 也 是 浏览 器 普遍 支持 的 网 页 脚本 语言 


。 几 乎 每 个 普通 用 户 的 计算 机 上 都 人 存 
在 JavaScript 程 序 的 影子 。JavaScript 几 乎 可 以 控制 所 有 常用 的 浏览 器 ， 而 且 JavaScript 是 世界 上 最 重要 的 编程 语言 之 一 ， 学 习 Web 技 术 必须 学 会 JavaScript。 


` JavaScript 的 历史 
JavaScript 特点 

- JavaScript 的 添加 方法 
` 基本 数据 类 型 


量 和 变量 


Javascript 是 一 种 解释 性 的 ， 基 于 对 象 的 脚本 语言 (an interpreted, object-based scripting language) 。 


HTML 网 页 在 互动 性 方面 能 力 较 弱 ， 例 如 下 拉 菜 单 ， 就 是 用 户 点 击 某 一 菜单 项 时 ， 自 动 会 出 现 该 菜单 项 的 所 有 子 菜单 ， 用 纯 HTML 网 页 无 法 实现 ; 又 如 验证 HTML 表 单 (Form) 提交 信息 的 有 效 性 ， 用 
户 名 不 能 为 空 ， 密 码 不 能 少 于 4 位 ， 邮 政 编码 只 能 是 数字 之 类 ， 用 纯 HTML 网 页 也 无 法 实现 。 要 实现 这 些 功 能 ， 就 需要 用 到 Javascript。 


Javascript 是 一 种 脚本 语言 ， 比 HTML 要 复杂 。 不 过 即便 不 懂 编 程 ， 也 不 用 担心 ， 因 为 Javascript 写 的 程序 都 是 以 源 代 码 的 形式 出 现 的 ， 也 就 是 说 在 一 个 网 页 里 看 到 一 段 比较 好 的 Javascript 代 码 ， 恰 好 
也 用 得 上 ， 就 可 以 直接 复制 ， 然 后 放 到 网 页 中 去 。 


JavaScript 是 Netscape 公 司 与 Sun 公 司 合作 开发 的 。 在 JavaScript 出 现 之 前 ，Web 浏 览 器 不 过 是 一 种 能 够 显示 超 文 本 文档 的 软件 的 基本 部 分 ;而 在 JavaScript 出 现 之 后 ， 网 页 的 内 容 不 再 局 限于 枯燥 的 文 
本 ， 它 们 的 可 交互 性 得 到 了 显著 的 改善 。JavaScript 的 第 一 个 版 本 ， 即 JavaScript 1.0 版 本 ， 出 现在 1995 年 推出 的 Netscape Navigator 2 浏览 器 中 。 


在 JavaScript 1.0 发 布 时 ，Netscape Navigator 主 宰 着 浏览 器 市 场 ， 微 软 的 I|E 浏 览 器 则 扮演 着 追赶 者 的 角色 。 微 软 在 推出 IE3 的 时 候 发 布 了 自己 的 VBScript 语 言 并 以 JScript 为 名 发 布 了 JavaScript 的 一 个 
版 本 ， 以 此 很 快 跟 上 了 Netscape 的 步伐 。 


面 对 微软 公司 的 竞争 ，Netscape 和 Sun 公 司 联合 ECMA (欧洲 计算 机 制造 商 协会 ) 对 JavaScript 语 言 进行 了 标准 化 。 其 结果 就 是 ECMAScript 语 言 ， 这 使 得 同一 种 语言 又 多 了 一 个 名 字 。 虽 说 
ECMAScript 这 个 名 字 没 有 流行 开 来 ， 但 人 们 现在 谈论 的 JavaScript 实 际 上 就 是 ECMAScript。 


到 了 1996 年 ，JavaScript、ECMAScript、jJScript 一 一 随便 你 们 怎么 称呼 它 ， 已 经 站 稳 了 脚跟。Netscape 和 微软 公司 在 它们 各 自 的 第 3 版 浏览 器 中 都 不 同 程 度 地 提供 了 对 JavaScript 1.1 语 言 的 支持 。 


这 里 必须 指出 的 是 ，JavaScript 与 Sun 公 司 开发 的 Java 程 序 语言 没有 任何 联系 。 人 们 最 初 给 JavaScript 起 的 名 字 是 LiveScript， 后 来 选择 “JavaScript” 作 为 其 正式 名 称 的 原因 ， 大 概 是 想 让 它 听 起 来 有 系 
出 名 门 的 感觉 ， 但 令 人 遗憾 的 是 ， 这 一 选择 反而 更 容易 让 人 们 把 这 两 种 语言 混为一谈 ， 而 这 种 混淆 又 因为 各 种 Web 浏 览 器 确实 具备 这 样 或 那样 的 Java 客 户 端 支持 功能 的 事实 被 进一步 放大 和 加 剧 。 事 实 上 ， 
虽说 Java 在 理论 上 几乎 可 以 部 署 在 任何 环境 中 ， 但 JavaScript 却 只 局 限于 Web 浏 览 器 。 


12.1.2 JavaScript% 


JavaScript 具 有 以 下 语言 特点 。 
- JavaSctipt 是 一 种 脚本 编写 语言 ， 采 用 小 程序 段 的 方式 实现 编程 ， 也 是 一 种 解释 性 语言 ， 提 供 了 一 个 简易 的 开发 过 程 。 它 与 HTML 标 识 结合 在 一 起 ， 从 而 方便 用 户 的 使 用 操作 。 
- JavaSctipt 是 一 种 基于 对 象 的 语言 ， 同 时 也 可 以 看 作 是 一 种 面向 对 象 的 语言 。 这 意味 着 它 能 运用 自己 已 经 创建 的 对 象 ， 因 此 许多 功能 可 以 来 自 于 脚本 环境 中 对 象 的 方法 与 脚本 的 相互 作用 。 
.JavaSctipt 具 有 简单 性 。 首 先 它 是 一 种 基于 Java 基 本 语句 和 控制 流 之 上 的 简单 而 紧凑 的 设计 ， 其 次 它 的 变量 类 型 采用 弱 类 型 ， 并 未 使 用 严格 的 数据 类 型 。 
` JavaSctipt 是 一 种 安全 性 语言 ， 它 不 允许 访问 本 地 硬盘 ， 并 且 不 能 将 数据 存 入 到 服务 器 上 ， 不 允许 对 网 络 文档 进行 修改 和 删除 ， 只 能 通过 浏览 器 实现 信息 浏览 或 动态 交互 ， 从 而 有 效 地 防止 数据 丢失 。 


` JavaSctipt 是 动态 的 ， 它 可 以 直接 对 用 户 或 客户 输入 做 出 响应 ， 无 须 经 过 Web 服 务 程序 。 它 对 用 户 的 反映 响应 ， 是 采用 以 事件 驱动 的 方式 进行 的 。 所 谓 事 件 驱 动 ， 就 是 指 在 网 页 中 执行 了 某 种 操作 所 产 
生 的 动作 ， 就 称 为 “事件 。 比 如 按 下 鼠标 、 移 动 窗口 、 选 择 菜 单 等 都 可 以 视 为 事件 。 当 事件 发 生 后 ， 可 能 会 引起 相应 的 事件 响应 。 


-JavaScript 具有 跨 平台 性 。JavaScript 是 依赖 于 浏览 器 本 身 ， 与 操作 环境 无 关 ， 只 要 能 运行 浏览 器 的 计算 机 ， 并 支持 JavaScript 的 浏览 器 就 可 正确 执行 。 从 而 实现 了 “编写 一 次 ， 走 遍 天 下 ”的 梦想 。 


12.1.3 JavaScript; 
我 们 经 常 要 在 一 些 代 码 旁 做 一 些 注释 ， 这 样 做 的 好 处 很 多 ， 比 如 : 方便 查找 、 方 便 比 对 、 方 便 项 目 组 里 的 其 他 程序 员 了 解 你 的 代码 ， 而 且 可 以 方便 以 后 你 对 自己 代码 的 理解 与 修改 等 。 
单行 注释 以 “// ”开头 ， 下 面 的 例子 使 用 单行 注释 来 解释 代码 。 


var x=5; // 声明 x 并 把 5 赋值 给 它 
var y=x+2; // 声明 y 并 把 x+2 赋值 给 它 


多 行 注释 以 “/*” 开始 ， 以 “*/” 结 尾 ， 下 面 的 例子 使 用 多 行 注释 来 解释 代码 。 


/* 
下 面 的 这 些 代码 会 输出 

一 个 标题 和 一 个 段落 

并 将 代表 主页 的 开始 

ы 

document .getElementById ("myH1") .innerHTML="Welcome to my Homepage"; 
document .getElementById ("тур") .innerHTML="This is my first paragraph."; 


过 多 的 Javascript 注 释 会 降低 Javascript 的 执行 速度 与 加 载 速度 ， 因 此 应 在 发 布 网 站 时 ， 尽 量 不 要 使 用 过 多 的 Javascript 注 释 。 


12.2 Javascript 的 添加 方法 


JavaScript 程 序 本 身 不 能 独立 存在 ， 它 是 依附 于 某 个 HTML 页 面 在 浏览 器 端 运行 的 。 本 身 JavaScript 作 为 一 种 脚本 语言 可 以 放 在 HTML 页 面 中 的 任何 位 置 ， 但 是 浏览 器 解释 HTML 时 是 按 先 后 顺序 的 ， 所 
以 放 在 前 面 的 程序 会 被 优先 执行 。 


12.21 内 部 引用 


在 HTML 中 输入 JavaScript 时 ， 需 要 使 用 <script> 标 签 。 在 <script> 标 签 中 ，language 特 性 声明 要 使 用 的 脚本 语言 ，language 特 性 一 般 被 设置 为 JlavaScript， 不 过 也 可 用 它 声 明 JavaScript 的 确切 版 


Я 


如 Javascript 1.3, 


当 浏 览 器 载 入 网 页 Body 部 分 的 时 候 ， 就 执行 其 中 的 JavaScript 语 句 ， 执 行 之 后 输出 的 内 容 就 显示 在 网 页 中 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>JavaScript 语 句 </title> 
</head> 

<body> 


<script type="text/javascriptl.3"> 
‚== 

var gt = unescape('%3e'); 

var popup = null; 
var over = "Launch Pop-up Navigator"; 

popup=window. open ('', "рорирпау!, 'width=225,height=235, resizable=1, scrollbars=auto') ; 
if (popup != null) í 

if (popup.opener == null) { 

popup.opener = self; 
} 


popup.location.href = 'tan.htm'; 


--> 
</script> 
</body> 
</html> 


浏览 器 通常 忽略 未 知 标签 ， 因 此 在 使 用 不 支持 Javascript 的 浏览 器 阅读 网 页 时 ，Javascript 代 码 也 会 被 阅读 。<! ----> 里 的 内 容 对 于 不 支持 javascript 的 浏览 器 来 说 就 等 同 于 一 段 注释 ， 而 对 于 支持 


JavaScript 的 浏览 器 ， 这 段 代码 仍然 会 执行 。 


提示 “通常 JavaScript 文 件 可 以 使 用 script 标 签 加 载 到 网 页 的 任何 一 个 地 方 ， 但 是 标准 的 方式 是 加 载 在 head 标 签 内 。 为 防止 网 页 加 载 缓慢 ， 也 可 以 把 非 关 键 的 JavaScript 放 到 网 页 底部 。 


12.2.2 外 部 调用 s 文 件 


如 果 很 多 网 页 都 需要 包含 一 段 相同 的 代码 ， 最 好 的 方法 ， 是 将 这 个 Javascript 程 序 放 到 一 个 后 缀 名 为 js 的 文本 文件 里 。 此 后 ， 任 何 一 个 需要 该 功能 的 网 页 ， 只 需要 引入 这 个 js 文件 就 可 以 了 。 
这 样 做 ， 可 以 提高 JavaScript 的 复 用 性 ,减少 代码 维护 的 负担 ， 不 必 将 相同 的 JavaScript 代 码 复制 到 多 个 HTML 网 页 里 ， 将 来 一 旦 程序 有 所 修改 ， 也 只 要 修改 .js 文件 就 可 以 。 


在 HTML 文 件 中 可 以 直接 输入 JavaScript， 还 可 以 将 脚本 文件 保存 在 外 部 ， 通 过 <script> 中 的 src 属 性 指定 URL 来 调用 外 部 脚本 语言 。 外 部 JavaScript 语 言 的 格式 非常 简单 。 事 实 上 ， 它 们 只 包含 
JavaScript 代 码 的 纯 文本 文件 。 在 外 部 文件 中 不 需要 <script/> 标 签 ， 引 用 文件 的 <script/> 标 签 出 现在 HTML 页 中 ， 此 时 文件 的 后 缀 为 “js”。 


<script type="text/javascript" src="URL"></script> 


通过 指定 script 标 签 的 src 属 性 ， 就 可 以 使 用 外 部 的 JavaScript 文 件 了 。 在 运行 时 ， 这 个 js 文件 的 代码 全 部 嵌入 到 包含 它 的 页 面 内 ， 页 面 程序 可 以 自由 使 用 ， 这 样 就 可 以 做 到 代码 的 复 用 。 
提示 JavaScript 文 件 外 部 调用 的 好 处 : 


@ 如 果 浏 览 器 不 支持 JavaScript， 将 急 略 sctipt 标 签 里 面 的 内 容 ， 可 以 避免 使 用 <! --http://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/16550/OEBPS/Text/...//- 


图 统一 定义 JavaScript 代 码 ， 方 便 查 看 ， 方 便 维护 。 
图 使 代码 更 安全 ， 可 以 压缩 ， 加 密 单个 JavaScript 文 件 。 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>JavaScript 语 句 </title> 

<script src="http://www.baidu.com/common.js"></script> 
</head> 

<body> 

</body> 

</html> 


示例 里 的 common.js 其 实 就 是 一 个 文本 文件 ， 内 容 如 下 : 


Function clickme () 


alert ("You clicked пе!") 


12.23 ”添加 到 事件 中 


一 些 简单 的 脚本 可 以 直接 放 在 事件 处 理 部 分 的 代码 中 。 如 下 所 示 直 接 将 Javascript 代 码 加 入 到 OnClick 事 件 中 。 


<input type="button" name="FullScreen" value=" 全 屏 显 示 " 
onClick="window.open (document. location, 'big', 'fullscreen=yes'") "> 


这 里 ， 使 用 <input/> 标 签 创建 一 个 按钮 ， 单 击 它 时 调用 onClick () 2%. опСісК BE— ИК РА, BOME MEHIN. 


123 ”基本 数据 类 型 


JavaScript 脚 本 语言 同 其 他 语言 一 样 ， 有 它 自身 的 基本 数据 类 型 、 表 达 式 和 算术 运算 符 以 及 程序 的 基本 框架 结构 。 在 JavaScript 中 四 种 基本 的 数据 类 型 : 数值 (整数 和 实数 ) 、 字 符 串 型 、 布 尔 型 和 空 
值 。 


12.3.1 使 用 字符 串 型 数据 


字符 串 是 存储 字符 的 变量 ， 可 以 表示 一 串 字符 ， 字 符 串 可 以 是 引号 中 的 任意 文本 ， 可 以 使 用 单 引 号 或 双 引 号 ， 如 下 代码 所 示 。 


基本 语法 : 
var зъс FREE"; // 使 用 双 引 号 定义 字符 串 
var str=' 字 符 串 '; // 使 用 单 引号 定义 字符 串 


可 以 通过 length 属 性 获得 字符 串 长 度 。 例 如 : 


var sStr=" How are you " 
alert (sStr.lenoth); 


下 面 使 用 引号 定义 字符 串 变 量 ， 使 用 document.write 输 出 相应 的 字符 串 ， 代 码 如 下 所 示 。 


<script> 

var пао1- "И"; 

var hao2=" 我 的 名 字 叫 丽 丽 "; 
var hao3=' 他 的 名 字 叫 小 明 " ; 
document.write (haol + "<br>" 
document.write (hao2 + "<br>" 
document .write (hao3 + "<br>" 
</script> 


— 


— 


— 


打开 网 页 文件 ， 运 行 效 果 如 图 12-1 所 示 。 
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% 100% = 
9121 输出 字符 串 

本 来 代码 中 var hao1= "你 好 呀 "、var hao3= "他 的 名 字 叫 小 明 "分别 使 用 单 引号 和 双 引 号 定义 字符 串 ， 最 后 使 用 document.write 输 出 定义 中 的 字符 串 。 
12.3.2 ”使 用 数值 型 数据 

Javascript 数 值 类 型 表示 一 个 数字 ， 比 如 5、12、-5、2e5。 数 值 类 型 有 很 多 值 ， 最 基本 的 当然 就 是 十 进 制 。 除 了 十 进 制 ， 整 数 还 可 以 通过 八进制 或 十 六 进 制 。 还 有 一 些 极 大 或 极 小 的 数值 ， 可 以 用 科学 
计数 法 表示 。 

var numl=10.00; // 使 用 小 数 点 来 写 

Var num2=10; // 不 使 用 小 数 点 来 写 


下 面 将 通过 实例 讲述 常用 的 数值 型 数据 的 使 用 方法 ， 代 码 如 下 所 示 。 


<seript> 
var х1=10.00; 


var z=12e-5; 
document.write (х1 + "<br />") 


document .write (x2 + "<br />") 
document.write (у + "<br />") 
document.write (z + "<br />") 
</script> 


运行 效果 如 图 12-2 所 示 。 
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8122 ”输出 数值 


本 例 代码 中 var x1=10.00、var x2=10 行 分 别 定义 十 进 制 数值 ，var y=12e5、var z=12e-5 用 科学 计数 定义 ， 最 后 使 用 document.write 输 出 十 进 制 数字 。 


12.3.3 ”使 用 布尔 型 数据 


Javascript 布 尔 类 型 只 包含 两 个 值 : 真 (true) ， 假 (false) ， 它 用 于 判断 表达 式 的 逻辑 条 件 。 每 个 关系 表达 式 都 会 返回 一 个 布尔 值 。 布 尔 类 型 通常 用 于 选择 程序 设计 的 条 件 判断 中 ， 比 如 


ifhttp://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/16550/OEBPS/Text/...else 语 句 。 


基本 语法 : 


var x=true 
var y=false 


下 面 将 通过 实例 讲述 布尔 型 数据 的 使 用 方法 ， 代 码 如 下 所 示 。 


<script> 
var message = "ЖШС; 
if (message) 


alert (" 这 个 是 正确 值 ") ; 


</script> 


JSC FTP, тешл “Е, ШЕ12-ЗАт. НЗ теѕѕаде ар 7 А]ЛҮНЧВооО!еап{# (true) 。 


图 12-3 ”警告 框 


12.3.4 使 用 Undefined 和 Null 类 型 


在 某 种 程度 上 ，null 和 undefine 都 是 具有 “ 空 值 ”的 含义 ， 因 此 容易 混淆 。 实 际 上 二 者 具有 完全 不 同 的 含义 。null 是 一 个 类 型 为 null 的 对 象 ， 可 以 通过 将 变量 的 值 设 置 为 null 来 清空 变量 。 而 Undefined 
这 个 值 表 示 变 量 不 含有 值 。 


如 果 定 义 的 变量 准备 在 将 来 用 于 保存 对 象 ， 那 么 最 好 将 该 变量 初始 化 为 null 而 不 是 其 他 值 。 这 样 一 来 ， 只 要 直接 检测 null 值 就 可 以 知道 相应 的 变量 是 否 已 经 保存 了 一 个 对 象 的 引用 了 ， 例如: 


1f (car != null) 


// 对 car 对 象 执行 某 些 操作 


实际 上 ，undefined 值 是 派生 自 null 值 的 ， 因 此 ECMA-262 规 定 对 它们 的 相等 性 测试 要 返回 true。 


alert (undefined == null); //true 


下 面 将 通过 实例 讲述 Undefined 和 Null 的 使 用 ， 代 码 如 下 : 


<script> 

var person; 

var car="hai"; 

document.write (person + "<br />"); 
document.write (car + "<br />"); 
var car=null; 
document.write (car + "<br />"); 
</script> 


var person 代 码 变量 不 含有 值 ，document.write (person+"<br/>") 输出 代码 即 为 undefined 值 ， 运 行 代码 效果 如 图 12-4 所 示 。 
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图 12-4 Undefined 和 和 Null 


124 常量 


常量 也 称 常数 ， 是 执行 程序 时 保持 常数 值 、 永 远 不 变 的 命名 项 目 。 常 量 可 以 是 字符 串 、 数 值 、 算 术 运 算 符 或 逻辑 运算 符 的 组 合 。 


12.4.1 常量 的 种 类 


在 Javascript 中 ， 常 量 有 以 下 6 种 基本 类 型 : 
1. 整 形 常量 


改变 的 数据 。 其 整形 常量 可 以 使 用 十 六 进 制 、 八 进 制 和 十 进 制 表示 其 值 。 


шр 


Javascript 的 常量 通常 又 称 字面 常量 ， 它 是 不 


2. 布 尔 值 


布尔 常量 只 有 两 种 状态 : True 或 False。 它 主要 用 来 说 明 或 代表 一 种 状态 或 标志 ， 以 说 明 操作 流程 。 它 与 C+ + 是 不 一 样 的 ，C++ 可 以 用 1 或 0 表示 其 状态 ， 而 JavaScript 只 能 用 True 或 False 表 示 其 状态 。 


3. 字 符 型 常量 


使 用 单 引 号 (") 或 双 引 号 ("") 括 起 来 的 一 个 或 几 个 字符 ， 如 "this а Боок""1234 "Е, 


4. 空 值 


JavaScript 中 有 一 个 空 值 Null， 表 示 什 么 也 没有 ， 如 试图 引用 没有 定义 的 变量 ， 则 返回 一 个 Null 值 。 


5. 特 殊 字符 


同 C 语 言 一 样 ，Javascript 中 同样 有 些 以 反 斜 杠 (/) 开头 的 不 可 显示 的 特殊 字符 ， 通 常 称 为 控制 字符 ， 例 如 : /ny/r 等 . 
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量 是 由 整数 部 分 加 小 数 部 分 表示 ， 如 12.32、193.98， 可 以 使 用 科学 或 标准 方法 表示 ， 如 4e6、5e4 等 。 


1242 ” 单 量 的 使 用 方法 


在 程序 执行 过 程 中 ， 其 值 不 能 改变 的 量 称 为 常量 。 常 量 可 以 直接 用 一 个 数 来 表示 ， 称 为 常数 (或 称 为 直接 常量 ) ， 也 可 以 用 一 个 符号 来 表示 ， 称 为 符号 常量 。 


下 面 通过 实例 讲述 字符 常量 、 布 尔 型 常量 和 数值 常量 的 使 用 ， 输 入 如 下 代码 。 


<script language="javascript"> 

document.write( "<li> 常 量 的 使 用 方法 <br>" ); // 使 用 字符 串 常量 

document .write( "<li>" + 7 + "一 星期 7 天 " ); // 使 用 数值 常量 

if( true ) // 使 用 布尔 型 常量 true 
{ 

document .write ("<br><1i> 布 尔 常量 : " + true ); 

} 

document.write ("<1i> 八 进 制 数值 常量 012 输 出 为 十 进 制 : " + 012); // 使 用 8 进 制 常量 和 十 进 制 常量 

--> 

</script> 


document write ("<li> 常 量 的 使 用 方法 <br>") 代码 使 用 字符 串 常量 ，document write ("<li>"+7+" 一 星期 7 天 ") 代码 使 用 数值 常量 7，if (true) 在 if 语句 块 中 使 用 布尔 型 常量 
true, document.write ("<li> 八进制 数值 常量 012 输 出 为 十 进 制 : "+012) 代码 使 用 八进制 数值 常量 输出 为 十 进 制 ， 运 行 代码 效果 如 图 12-5 所 示 。 


常量 的 使 用 方法 
7 一 星期 7 天 
Юве : (ие 


八进制 数值 常量 012 输 出 为 十 进 制 ，10 


9125 ”常量 的 使 用 方法 


1243 ”变量 的 合 义 


变量 是 存 取 数 字 、 提 供 存 放 信息 的 容器 。 正 如 代数 一 样 ，Javascript 变 量 用 于 保存 值 或 表达 式 。 可 以 给 变量 起 一 个 简短 名 称 ， 比 如 x。 


在 代数 中 ， 使 用 字母 (比如 x) 来 保存 值 (比如 4) 。 通 过 上 面 的 表达 式 z=x+y， 能 够 计算 出 z 的 值 为 9。 在 JavaScript 中 ， 这 些 字母 被 称 为 变量 。 


1244 ”变量 的 定义 方式 


Javascript 中 定义 变量 有 两 种 方式 : 
(1) 使 用 var 关 键 字 定义 变量 , 如 “var book; ” , 


该 种 方式 可 以 定义 全 局 变量 ， 也 可 以 定义 局 部 变量 ， 这 取决 于 定义 变量 的 位 置 。 在 函数 体 中 使 用 var 关 键 字 定义 的 变量 为 局 部 变量 ; 在 函数 体外 使 用 var 关 键 字 定义 的 变量 为 全 局 变量 


var my=5; 


。 例 如 : 


var mysite="baidu"; 


var 代 表 声明 变量 ，var 是 variable 的 缩写 。my 与 mysite 都 为 变量 名 (可 以 任意 取 名 ) ， 必 须 使 用 字母 或 者 下 划 线 (_) 开始 。5 与 "baidu "都 为 变量 值 ，5 代 表 一 个 数字 ， "baidu "是 一 个 字符 串 ， 因 此 应 
使 用 双 引 号 。 


(2) 不 使 用 var 关 键 字 ， 而 是 直接 通过 赋值 的 方式 定义 变量 ， 如 “param= "hello"”。 而 在 使 用 时 再 根据 数据 的 类 型 来 确 其 变量 的 类 型 。 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>test</title> 

<script type="text/javascript"> 
function test() 1 

param = KH"; 

alert (param) ; 

} 
alert (param) ; 

</script> 

</head> 

<body onload="test () "></body> 
</html> 


param = "你 好 "代码 直接 定义 变量 ，alert (param) 代码 是 页 面 弹出 提示 框 "你 好 "， 运 行 代码 效果 如 图 12-6 所 示 。 


图 12-6 ”提示 框 


12.45 ”变量 的 命名 规则 


大 家 都 知道 变量 定义 统一 都 是 var， 变 量 命名 也 有 相应 规范 。 首 先 JavaScript 是 一 种 区 分 大 小 写 的 语言 ， 即 变量 myVar、myVAR 和 myvar 是 不 同 的 变量 。 
另外 ， 变 量 名 称 的 长 度 是 任意 的 ， 但 必须 遵循 以 下 规则 : 


. 只 包含 字母 、 数 字 和 /或 下 划 线 并 区 分 大 小 写 。 


. 最 好 以 字母 开头 ， 注 意 一 定 不 能 用 数字 开头 。 
. 变量 名 称 不 能 有 空格 、+、-、， 或 其 他 符号 。 

. 最 好 不 要 太 长 ， 到 时 候 看 起 来 不 方便 。 

. 不 能 使 用 JavaScript 中 的 关键 字 作为 变量 。 在 JavaScript 中 定义 了 40 多 个 关键 字 ， 这 些 关键 字 是 JavaSctipt 内 部 使 用 的 ， 不 能 作为 变量 的 名 称 。 如 Var、int、double、true 不 能 作为 变量 的 名 称 。 


下 面 给 出 合法 的 命名 ， 也 是 合法 的 变量 名 : 


total 
tota 
totall0 
total 10 
total n 


12 tota 
Š total 
$# tota 


建议 为 了 方便 阅读 ， 变 量 名 可 以 定义 简单 而 且 容 易 记 忆 的 名 称 。 


1246 З= УЕБ 
在 JavaScript 中 有 全 局 变量 和 局 部 变量 。 全 局 变量 是 定义 在 所 有 函数 体 之 外 ， 其 作用 范围 是 整个 函数 ;而 局 部 变量 是 定义 在 函数 体 之 内 ， 只 对 该 函数 是 可 见 的 ， 而 对 其 他 函数 则 是 不 可 得 。 
例如 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 变 量 的 作用 范围 </title> 
<Script Language ="JavaScript"> 
«== 
greeting="<hl>Nice to meet you</hl>"; 
ме1соте="<р>бооа morning <cite> to you</cite>.</p>"; 
--> 
</Script> 
</head> 
<body> 
<Script language="JavaScript"> 
< s= 
document.write (greeting) ; 
document.write (welcome) ; 
--> 
</Script> 
</роду> 
</html> 


greeting="<h1>Nice to meet you</h1> "和 welcome="<p>Good morning <cite> to you </cite>.</p> "声明 了 两 个 字符 串 变 量 ， 最 后 使 用 document.write 语 句 将 两 个 页 面 分 别 显示 在 页 面 中 ， 


运行 代码 效果 如 图 12-7 所 示 。 
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Nice to meet you 


Good morning to you. 


图 12-7 ”变量 的 作用 


在 任何 一 种 语言 中 ， 处 理 数据 是 必 不 可 少 的 一 个 功能 ， 而 运算 符 就 是 处 理 数 据 中 所 不 能 缺少 的 一 种 符号 。 


12.5.1 算术 运算 符 


JavaScript 算 术 运 算 符 负 责 算术 运算 ，JavaScript 算 术 运 算 符 包 括 +，-,，*，/，%。 用 算术 运算 符 和 运算 对 象 连接 起 来 ， 符 合 规则 JavaScript 语 法 的 式 子 ， 称 JavaScript 算 术 表 达 式 .。 


加 法 运算 符 (+) 是 一 个 二 元 运算 符 ， 可 以 对 两 个 数字 型 的 操作 数 进行 相 加 运算 ， 返 回 值 是 两 个 操作 数 之 和 。 例 如 : 


<script language="javascript"> 
= 
var 1=10; 
var х-1+3; 
document.write( x ); 
--> 
</script> 


这 里 将 10 赋 值 给 j， 运 行 加 法 运算 x=i+3， 使 用 document.write (х) 输出 结果 x 为 13， 如 图 12-8 所 示 。 
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12-8 ”加 法 运算 
12.5.2 ”关系 运算 符 


关系 运算 符 是 把 左 操作 数 和 右 操作 数 作 比 较 ， 然 后 返回 一 个 逻辑 值 : true 或 false。 关 系 运算 符 包含 相等 运算 符 、 等 同 运算 符 、 不 等 运算 符 、 不 等 同 运算 符 、 小 于 运算 符 、 大 于 运算 符 、 小 于 或 等 于 运算 
符 和 大 于 或 等 于 运算 符 。 


相等 运算 符 (==) 是 先进 行 类 型 转换 再 测试 是 否 相等 ， 如 果 左 操作 数 等 于 右 操作 数 ， 则 返回 true， 否 则 返回 false。 例 如 : 
基本 语法 : 


<script language="javascript'> 
<!-- 


var a = "6"; 
var b = 6; 

var c = 8; 
if (а = ЫЬ) 
( 


//a、b 发 生 类 型 转换 


document.write ("a 等 于 b<br>"); // 如 果 a=b 输 出 a 等 于 b 
else 
{document .write ("a 不 等 于 b<br>"); } // 否 则 输出 a 不 等 于 b 
if ( b = с) 
{ 
document.write ("БР c<br>"); // 如 果 b=c 输 出 b 等 于 c 
) 
else 
{document .write("b 不 等 于 c<br>"); } // 否 则 输出 P 不 等 于 c 
--> 
</script> 
语法 说 明 : 


相等 运算 符 并 不 要 求 两 个 操作 数 的 类 型 都 一 样 ， 相 等 运算 符 会 将 字符 串 "6 "与 数字 6 认为 是 两 个 相等 的 操作 数 ， 运 行 代码 效果 12-9 所 示 。 


алс O - 


2 


912-9 ”相等 运算 


1253 ”字符 串 运算 符 


字符 串 运 算 符 除了 比较 操作 符 ， 可 应 用 于 字符 串 值 的 操作 符 还 有 连接 操作 符 (+) ， 它 会 将 两 个 字符 串 连 接 在 一 起 ， 并 返回 连接 的 结果 。 
+ 运算 符 用 于 把 文本 值 或 字符 串 变量 加 起 来 (连接 起 来 ) 。 如 需 把 两 个 或 多 个 字符 串 变 量 连 接 起 来 ， 即 可 使 用 + 运算 符 。 要 想 在 两 个 字符 串 之 间 增 加 空格 ， 需 要 把 空格 插入 一 个 字符 串 之 中 ， 例 如 : 


<script language="javascript"> 


<! == 

var txt1l=" 大 家 好 "; 

var txt2=" 我 是 新 来 的 学 生 "; 

var txt3=txtl+" "+txt2; 

document .write ( "输出 变量 txt3: " + txt3 ); 
--> 
</script> 


在 以 上 语句 执行 后 ， 变 量 txt3 包 含 的 值 是 “大 家 好 我 是 新 来 的 学 生 ”， 如 图 12-10 所 示 。 


ШШ Р-с елхишхе 
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输出 变量 txt3， 大 家 好 我 是 新 来 的 学 生 


1254 “赋值 运算 符 
赋值 运算 符 (=) 的 作用 是 给 一 个 变量 赋值 ， 即 将 某 个 数值 指定 给 某 个 变量 。JavaScript 的 赋值 运算 符 不 仅 可 用 于 改变 变量 的 值 ， 还 可 以 和 其 他 一 些 运算 符 联合 使 用 ， 构 成 混合 赋值 运算 符 。 


. 二 将 右边 的 值 赋 给 左边 的 变量 。 


边 的 变量 递减 右边 表达 式 的 值 。 


ll 
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边 的 变量 乘 以 右边 表达 式 的 值 。 


ІІ 
2 
bi 
за 
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. %= 将 运算 符 左 边 的 变量 用 右边 表达 式 的 值 求 模 。 
. &= 将 运算 符 左边 的 变量 与 右边 表达 式 的 值 按 位 与 。 

. ! = 将 运算 符 左边 的 变量 与 右边 表达 式 的 值 按 位 或 。 

. ^= 将 运算 符 左 边 的 变量 与 右边 表达 式 的 值 按 位 异 或 。 

. <<= 将 运算 符 左边 的 变量 左 移 ， 具 体位 数 由 右边 表达 式 的 值 给 出 。 

. >>= 将 运算 符 左边 的 变量 右 移 ， 具 体位 数 由 右边 表达 式 的 值 给 出 。 

. >>>= 将 运算 符 左 边 的 变量 进行 无 符号 右 移 ， 具 体位 数 由 右边 表达 式 的 值 给 出 。 

赋值 表达 式 的 值 也 就 是 所 赋 的 值 。 例 如 ，x= (y+=z) 就 相当 于 x= (y=y+z) ， 相当 于 x=y+z，x 的 值 由 于 赋值 语句 的 变化 而 不 断 发 生变 化 ， 而 y 的 值 始终 不 变 。 


下 面 举 一 些 例子 来 说 明 赋 值 运算 符 的 用 法 : 


设 a=3b=2 
a+=b=5a-=b=1 


a*=b=6a/=b=1.5 


a%=b=1a&=b=2 


12.5.5 “逻辑 运算 符 


程序 设计 语言 还 包含 一 种 非常 重要 的 运算 ， 逻 辑 运 算 。 逻 辑 运算 符 比 较 两 个 布尔 值 (ARR) ， 然 后 返回 一 个 布尔 值 。 逻 辑 运算 符 包括 “&&” 逻辑 与 运算 、“|| ”逻辑 或 运算 符 和 “! ”逻辑 非 运算 
符 。 

逻辑 与 运算 符 〈&&) 要 求 左右 两 个 操作 数 的 值 都 必须 是 布尔 值 。 逻 辑 与 运算 符 可 以 对 左右 两 个 操作 数 进行 AND 运 算 ， 只 有 左右 两 个 操作 数 的 值 都 为 真 (true) 时 ， 才 会 返回 true。 如 果 其 中 一 个 或 两 
个 操作 数 的 值 为 假 (false) ， 其 返回 值 都 为 false。 例 如 : 


<script language="javascript"> 


var x= 8; // 将 8 赋值 给 x 
var y= 8; // 将 8 赋值 给 y 
var z= 3; // 将 3 赋值 给 z 


if (x==y &&y==Zz) 
{ 


document.write ( "true" ) 
} 
else 
{ document.write ( "false" ) ) 
</script> 


x 和 y 都 等 于 8，z 等 于 3， 所 以 y 并 不 等 于 z， 运 行 代码 效果 如 图 12-11 所 示 。 


图 12-11 iF J i $ 


12.5.6 АВЕ 


位 操作 符 执行 位 操作 时 ， 操 作 符 会 将 操作 数 看 作 一 串 二 进 制 位 (180) ， 而 不 是 十 进 制 、 十 六 进 制 或 八进制 数字 。 人 例如， 十进制 的 9 就 是 二 进 制 的 1001。 位 操作 符 在 执行 的 时 候 会 以 二 进 制 形式 进行 操 
作 ， 但 返回 的 值 仍 是 标准 的 JavaScript 数 值 。 
位 与 运算 符 (8) 是 一 个 二 元 运算 符 ， 该 运算 符 可 以 将 左右 两 个 操作 数 逐 位 执行 AND 操 作 ， 即 只 有 两 个 操作 数 中 相对 应 的 位 都 为 1 时 ， 该 结果 中 的 这 一 位 才 为 1， 否 则 为 0。 例 如 : 


<script language="javascript"> 
ا‎ 
var exprl 8; 
var expr2 10; 

var result = exprl « ехрг2; 
document.write (result) ; 

--> 
</script> 


在 进行 位 与 操作 时 ， 位 与 运算 符 会 先 将 十 进 制 的 操作 数 转化 为 二 进 制 ， 再 将 二 进 制 中 的 每 一 位 数值 逐 位 进行 AND 操 作 ， 得 出 结果 将 转化 为 十 进 制 ，8 对 应 的 二 进 制 数 是 1000，10 对 应 的 二 进 制 数 是 
1010 (1000&1010=1000) ， 所 以 运行 代码 效果 结果 为 8， 如 图 12-12 所 示 。 


Еро И Оо - с яға 


УНР SSE ЖЕП) HEZA ТЫП) ”帮助 (H) 


81212 位 与 运算 符 


12.6 ”技能 训练 一 一 制作 倒计时 特效 


倒计时 特效 可 以 让 用 户 明确 知道 到 某 个 日 期 剩余 的 时 间 ， 制 作 倒 计时 特效 的 具体 操作 步骤 如 下 。 
01 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 12-13 所 示 。 


02 在 <body> 与 </body> 之 间 相 应 的 位 置 输入 以 下 代码 ， 如 图 12-14 所 示 。 


<Script Language="JavaScript"> 

var timedate= new Date ("October 1,2017"); 

var times="JúFL"; 

var now = new Date () ; 

var date = timedate.getTime() - now.getTime(); 

var time = Math.floor(date / (1000 * 60 * 60 * 24)); 

if (time >= 0) ; 
document.write ("现在 离 2017 年 "+times+" 还 有 : <font color=red><b>"+time +"</b></font> K"); 
</Script> 


提示 ”图 利 用 var date=timedate.getTime () -now.getTime () 可 以 获得 剩余 时 间 ， 由 于 时 间 是 以 毫秒 为 单位 的 ， 因 此 根据 时 间 单 位 的 换算 率 如 下 。 
1 天 =24 小 时 

1 小 时 =60 分 名 

1 分 钟 =60 和 和 

1 秒 =1000 毫 米 


@ 7] J var time=Math.floor (date/ (1000*60*60*24) ) 将 剩余 时 间 转 为 剩余 天 数 。 
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12-13 ”打开 网 页 文档 
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12-14 ”输入 代码 


03 ”保存 文档 ， 在 浏览 器 中 浏览 效果 ， 如 图 12-15 所 示 。 
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图 12-15 倒计时 效果 


85135: ”Javascript 程序 核心 语法 


Javascript 中 的 函数 本 身 就 是 一 个 对 象 ， 而 且 可 以 说 是 最 重要 的 对 象 。 之 所 以 称 之 为 最 重要 的 对 象 ， 一 方面 它 可 以 扮演 像 其 他 语言 中 的 函数 同样 的 角色 ， 可 以 被 调用 ， 可 以 被 传 入 参数 ; 另 一 方面 他 还 
被 作为 对 象 的 构造 器 来 使 用 ， 可 以 结合 new 操 作 符 来 创建 对 象 。 


JavaScript 中 提供 了 多 种 用 于 程序 流程 控制 的 语句 ， 这 些 语 句 可 以 分 为 选择 和 循环 两 大 类 。 选 择 语句 包括 if、switch 系 列 ， 循 环 语句 包括 while、for 等 。 
本 章 重 点 

. 什么 是 函数 

. 函数 的 参数 传递 

. 函数 中 变量 的 作用 域 和 返回 什 

. 函数 的 定义 

. 使 用 选择 语句 


` 使 用 循环 语句 


13.1 РА 


函数 是 Javascript 中 最 灵活 的 一 种 对 象 ， 函 数 是 由 事件 驱动 的 或 者 当 它 被 调用 时 执行 的 可 重复 使 用 的 代码 块 。Javascript 提 供 了 许多 函数 供 开 有 友人 员 使 用 。 


` 


13.1.1 РАЯ 


Javascript 中 的 函数 是 可 以 完成 某 种 特定 功能 的 一 系列 代码 的 集合 ， 在 函数 被 调用 前 函数 体内 的 代码 并 不 执行 ， 即 独立 于 主 程序 。 编 写 主 程序 时 不 需要 知道 图 数 体内 的 代码 如 何 编写 ， 只 需要 使 用 函数 
方法 即 可 。 可 把 程序 中 大 部 分 功能 拆 解 成 一 个 个 函数 ， 使 程序 代码 结构 清晰 ， 易 于 理解 和 维护 。 遂 数 代码 的 执行 结果 不 一 定 是 一 成 不 变 的 ， 可 以 通过 向 函数 传递 参数 ， 以 解决 不 同情 况 下 的 问题 ， 函 数 也 可 
返回 一 个 值 。 


消 数 是 进行 模块 化 程序 设计 的 基础 ， 编 写 复杂 的 应 用 程序 ， 必 须 对 冰 数 有 更 深入 的 了 解 。JavaScript 中 的 函数 不 同 于 其 他 的 语言 ， 每 个 遂 数 都 是 作为 一 个 对 象 被 维护 和 运行 的 。 通 过 冰 数 对 象 的 性 质 ， 
可 以 很 方便 地 将 一 个 函数 赋值 给 一 个 变量 或 者 将 函数 作为 参数 传递 。 在 继续 讲述 之 前 ， 先 看 一 下 函数 的 使 用 语法 : 


Function func1l (...) {...} 

Var func2=function (...) {..}; 

мас func3=function func4 (...) {...}; 
var func5=new Function (); 


这 些 都 是 声明 函数 的 正确 语法 。 


可 以 用 function 关 键 字 定 义 一 个 国 数 ， 并 为 每 个 国 数 指定 一 个 国 数 名 ， 通 过 函数 名 来 进行 调用 。 在 Javascript 解 释 执 行 时 ， 函 数 都 是 被 维护 为 一 个 对 象 ， 这 就 是 要 介绍 的 国 数 对 象 (Function 
Object) 。 


函数 对 象 与 其 他 用 户 所 定义 的 对 象 有 着 本 质 的 区 别 ， 这 一 类 对 象 被 称 之 为 内 部 对 象 ， 例 如 日 期 对 象 (Date) 、 数 组 对 象 (Array) 、 字 符 串 对 象 (String) 都 属于 内 部 对 象 。 这 些 内 置 对 象 的 构造 器 是 由 
JavaScript 本 身 所 定义 的 : 通过 执行 new Array () 这 样 的 语句 返回 一 个 对 象 ，Javascript 内 部 有 一 套 机 制 来 初始 化 返回 的 对 象 ， 而 不 是 由 用 户 来 指定 对 象 的 构造 方式 。 


函数 就 是 包 庄 在 花 括 号 中 的 代码 块 ， 下 面 是 使 用 关键 词 function 的 语法 : 


Function functionname () 


{ 
这 里 是 要 执行 的 代码 
} 


当 调 用 该 函数 时 ， 会 执行 尔 数 内 的 代码 。 
可 以 在 某 事 件 发 生 时 直接 调用 函数 (比如 当 用 户 单 击 按钮 时 ) ， 并 且 可 由 Javascript 在 任何 位 置 进行 调用 。 


提示 JavaScript 对 大 小 写 敏感 。 关 键 词 function 必 须 是 小 写 的 ， 并 且 必 须 以 与 函数 名 称 相同 的 大 小 写 来 调用 函数 。 


13.1.2” 遂 数 的 参数 传递 


在 调用 遂 数 时 ， 可 以 向 其 传递 值 ， 这 些 值 被 称 为 参数 。 这 些 参数 可 以 在 浮 数 中 使 用 ， 可 以 发 送 任 意 多 的 参数 ， 由 召 号 分 隔 : 


myFunction (argumentl,argument2) 


当 声 明 函 数 时 ， 需 要 把 参数 作为 变量 来 声明 : 


function myFunction (varl,var2) 


{ 
这 里 是 要 执行 的 代码 
} 


变量 和 参数 必须 以 一 致 的 顺序 出 现 。 第 一 个 变量 就 是 第 一 个 被 传递 的 参数 的 给 定 的 值 ， 以 此 类 推 。 例 如 : 


<body> и 

<button onclick="myFunction(' 丽 丽 ', ' 小 姐 ') "> 点 击 这 里 </button> 
<script> 

function myFunction (name, job) 

( 
alert ("欢迎 "m+ name + ", Æ " + job); 
} 

</script> 


上 面 的 函数 会 当 按钮 被 点 击 时 提示 "欢迎 丽 丽 ， 鹤 小 姐 `， 运 行 代码 效果 如 图 13-1 所 示 。 
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ЖОШ BARÊ, Œ 小 姐 


图 13-1 调用 带 参 数 的 函数 


13.1.3 ВР НЕАБ ЕНЕ 


有 时 ， 我 们 会 希望 函数 将 值 返回 调用 它 的 地 方 。 通 过 使 用 return 语 句 就 可 以 实现 。 在 使 用 return 语 句 时 ， 消 数 会 停止 执行 ， 并 返回 指定 的 值 。 


基本 语法 : 


function myFunction () 
{ 

var х=5; 

return x; 


) 


##7JavaScriptif4-2f=1EH/r, NINE. JavaScript kk AARIA TRE, HENA AFORE SEN. 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

<p> 返 回 结果 : </p> 

<р id="for"></p> 
<script> 

function myFunction (a,b) 
{ 


return a*b; 


document .getElementById ("for") .innerHTML=æmyFunction (3,3); 
</script 
</body> 
</html> 


У 


本 例 调 用 的 函数 会 执行 一 个 乘法 计算 ， 然 后 返回 运行 结果 9， 效 果 如 图 13-2 所 示 。 


р-с аль 
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图 13-2” 带 有 返回 值 的 函数 


13.2 НЕМ. 


ЕНЕ SEES IMTFEX., JavaScript -Рипспопй 3, АШе МЕ ВЕипспопх НУЫ = БА ROEA. [ЈА РД Function ЖЕЗ ЕНУ ЖЕ М DRAR. FEHM 
讲述 函数 的 定义 方法 。 


1321 ”函数 的 普通 定义 方式 


普通 定义 方式 使 用 关键 字 function， 也 是 最 常用 的 方式 ， 形 式 上 跟 其 他 的 编程 语言 一 样 ， 语 法 格式 如 下 。 
基本 语法 : 


Function 函数 名 (参数 1， 参 数 2，.…….) 
{ [语句 组 ] 

Return [表达 式 ] 

} 


语法 解释 : 

° function: 必 选 项 ， 定 义 了 水 数 用 的 关键 字 。 

-HAE 必 选 项 ， 合 法 的 JavaSctipt 标 识 符 。 

* ЖЖ: 可 选项 ， 合 法 的 JavaSctipt 标 识 符 ， 外 部 的 数据 可 以 通过 参数 传送 到 函数 内 部 。 

- 语句 组 : 可 选项 ，JavaSctipt 程 序 语句 ， 当 为 空 时 函数 没有 任何 动作 。 

' return: 可 选项 ， 遇 到 此 指令 函数 执行 结束 并 返回 ， 当 省 略 该 项 时 函数 将 在 右 花 括号 处 结 来 。 
ЖІК: 可 选项 ， 其 值 作为 函数 返回 值 。 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<script type="text/javascript"> 
function displaymessage () 


( 

alert (" 欢 迎 您 ! "); 
) 

</script> 
</head> 


<input type="button" value=" ÄR!" onClick="displaymessage()" /> 
</form> 
</body> 
</html> 


这 段 代 码 首先 在 Javascript 内 建立 一 个 displaymessage () 4%, НЕХ АН, MARATHI, BEF WEG! ”。 运 行 代码 在 浏览 器 中 预览 效果 如 图 13-3 所 示 。 


жаратына 


图 13-3 ”函数 的 应 用 


13.2.2 ”函数 的 变量 定义 方式 


在 JavaScript 中 ， 函 数 对 象 对 应 的 类 型 是 Function， 正 如 数组 对 象 对 应 的 类 型 是 Array， 日 期 对 象 对 应 的 类 型 是 Date 一 样 ， 可 以 通过 new Function () 来 创建 一 个 国 数 对 象 ， 语 法 如 下 。 


NEIE 


基本 语法 : 
Var 变量 名 =new Function ( [参数 1， 参 数 2，.….. 1, МЖЖ) ; 
语法 解释 : 


` 变量 名 : 必 选 项 ， 代 表 函 数 名 ， 是 合法 的 JavaSctript 标 识 符 。 
- ЖЖ: 可 选项 ， 作 为 函数 参数 的 字符 串 ， 必 须 是 合法 的 JavaSctipt 标 识 符 ， 当 函数 没有 参数 时 可 以 忽略 此 项 。 


АЖА: 可 选项 ， 一 个 字符 串 。 相 当 于 浮 数 体内 的 程序 语句 系列 ， 各 语句 使 用 分 号 隔 开 。 


用 new Function () 的 形式 来 创建 一 个 函数 不 常见 ， 因 为 一 个 函数 体 通常 会 有 多 条 语句 ， 如 果 将 它们 以 一 个 字符 串 的 形式 作为 参数 传递 ， 代 码 的 可 读 性 差 。 


实例 代码 : 


<script language="javascript"> 
var circularityArea = new Function( "r", "return r*r*Math.PI" ); // 创建 一 个 函数 对 象 


var rCircle = 3; // 给 定 圆 的 半径 
var area = circularityArea (rCircle) ; // 使 用 求 圆 面积 的 函数 求 面 积 
document .write( "半径 为 3 的 圆 面积 为 : " + area ); // 输出 结果 

</script> 


пя ПА 


ТААЗ ЕВЗ Ее ANEX- AREA, RE AFAA. ЗАРАДИ лъва УДАА ПЕ 13-48775. 


8) РИКА D - с | @ == 
XHA REE) БЕУ LERA ТАП) ENH 
半径 为 3 的 圆 面积 为 ，28 274333882308138 


图 13-4 函数 的 应 用 


13.2.3 ”函数 的 指针 调用 方式 


前 面 的 代码 中 ， 函 数 的 调用 方式 是 最 常见 的 ， 但 是 JavaScript 中 函数 调用 的 形式 比较 多 ， 非 常 灵 活 。 有 一 种 重要 的 ， 在 其 他 语言 中 也 经 常 使 用 的 调用 形式 叫做 回调 ， 其 机 制 是 通过 指针 来 调用 遂 数 。 回 
调 函 数 按照 调用 者 的 约定 实现 函数 的 功能 ， 由 调用 者 调用 。 通 常 使 用 在 自己 定义 功能 而 由 第 三 方 去 实现 的 场合 ， 下 面 举例 说 明 。 


实例 代码 : 
<script language="javascript"> 3 
function SortNumber( obj, // 定义 通用 排序 函数 
1 // 参数 验证 ， MRA ЗУ ТТТ 
1Е( !(obj instanceof Array) || !(func instanceof Function)) 
{ 
var e = new Error () ; // 生成 错误 信息 
e.number = 100000; // 定义 错误 号 
e.message = "参数 无 效 "; // 错误 描述 
throw e; // 抛 出 异常 
} 
for( n in obj ) // 开始 排序 
{ 
Ғо ра m in ору ) 


{ if( func( obj [n], obj [ml ) ) // 使 用 回调 函数 排序 ， 规 则 由 用 户 设 定 
I 
var tmp = obj[n]; 
obj [n] = ору [m]; 
obj[m] = tmp; 


} 
} 


return obj; // 返回 排序 后 的 数组 

} 

function greatThan( argl, arg2 ) // 回调 函数 ， 用 户 定 义 的 排序 规则 

[ return argl < aro2; // 规则 : 从 小 到 大 

} 

ту 

{ var numAry = new Array(7,10,58,33,20,55,80,66 ); // 生成 一 数组 
document.write ("<1i> 排 序 前 : "+numAry); 4) АТ ы 
SortNumber( numAry, greatThan ) 调用 排序 函数 
document.write ("<1i> 排 序 后 : "+пишАгу); и ЕИ 

} 

catch (е) 

{ alert( e.number+": "+e.message ); // 异常 处 理 


} 
</script> 


В ЕЕ ЕЕЕ O - с ажын 


排序 前 ，7 10 58 33 20 55 80 66 
ВЕРЕ: 7.10.20.33.55 58 66.80 


113-5 ”函数 的 指针 调用 方式 


这 段 代码 演示 了 回调 函数 的 使 用 方法 。 首 先 定义 一 个 通用 排序 函数 SortNumber (obj, func) ， 其 本 身 不 定义 排序 规则 ， 规 则 交 由 第 三 方 函数 实现 。 接 着 定义 一 个 greatThan (arg1，arg2) 函数 ， 其 
内 创建 一 个 以 小 到 大 为 关系 的 规则 。document.write ("<li> 排 序 前 :“+numAry) 输出 未 排序 的 数组 。 接 着 调用 SortNumber (numAry，greatThan) 函数 排序 。 运 行 代码 在 浏览 器 中 预览 效果 如 图 13-5 
所 示 。 


пе) а ERA O с | ë =k 


排序 前 ，7.10.58.33.20.55.80.66 
排序 后 ，7.10.20.33.55.58.66.80 


4135 ”函数 的 指针 调用 方式 


13.3 ”使 用 选择 语句 


选择 语句 就 是 通过 判断 条 件 来 选择 执行 的 代码 块 。JavaScript 中 选择 语句 有 if 语 句 、switch 语 句 两 种 。 


13.3.1 if 选择 语句 
if 语句 只 有 当 指定 条 件 为 true 时 ， 该 语句 才 会 执行 代码 。 
基本 语法 : 


f (条 件 ) 
4 有 当 条 件 为 true 时 执行 的 代码 


中 一 F: 


— N 


提示 “请 使 用 小 写 的 if。 使 用 大 写字 母 (IF) 会 生成 JavaScript 错 误 ! 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 


</head> 

<body> 

<script type="text/javascript"> 
var vText = "Good morning!"; 
var vLen = vText. length; 

if (vLen < 20) 


Í 

document.write ("<p> 该 字符 串 长 度 小 于 20。</p>") 
} 
</script> 
</body> 
</html> 


本 实例 用 到 了 Javascript 的 if 条 件 语句 。 首 先 用 length 计 算出 字符 串 Good morning! 的 长 度 ， 然 后 使 用 if 语 句 进行 判断 ， 如 果 该 字符 串 长 度 <20， 就 显示 “该 字符 串 长 度 小 于 20”， 运 行 代码 效果 13-6 
所 示 。 


ХІ) Е) FEV KESA ТЫП) ВИН) 
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图 13-6 ”if 选择 语句 


13.3.2 ”if-else 选择 语句 


如 果 希 望 条 件 成 立时 执行 一 段 代码 ， 而 条 件 不 成 立时 执行 男 一 段 代码 ， 那 么 可 以 使 用 ifhttp://www.hzcourse.com/resource/readBook? 
path=/openresources/teach ebook/uncompressed/16550/OEBPS/Text/..http://www.hzcourse.com/resource/readBook? 
path=/openresources/teach ebook/uncompressed/16550/OEBPS/Text/..else 语 句 。if...else 语 句 是 JavaScript 中 最 基本 的 控制 语句 ， 通 过 它 可 以 改变 语句 的 执行 顺序 。 


基本 语法 : 
if (条 件 ) 


{ 

条 件 成 立时 执行 此 代码 

} 

else 

{ 

条 件 不 成 立时 执行 此 代码 

} 

这 人 句 语 法 的 含义 是 ， 如 果 符 合 条 件 ， 则 执行 if 语 句 中 的 代码 ; 反之 ， 则 执行 else 代 码 。 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 

</head> 

<body> 

<p> 单 击 按钮 ， 获 得 基于 时 间 的 问候 。</p> 
<button onclick="myFunction () "> 点 击 这 
<p id="demo"></p> 

<script> 

function myFunction () 

{ 
var х-""; 
var time=new Date () .getHours () ; 
if (time<20) 


I 
x=" RIF"; 
} 


else 


I 

х=" EF " ; 

} 

document .getElementById ("demo") .innerHTML=x; 
} 
</script> 
</body> 
</html> 


Um 


E</button> 


使 用 var time=new Date () .getHours () ; 定义 一 个 变量 表示 当前 时 间 。 接 着 使 用 一 个 if 语句 判断 变量 time 的 值 是 否 小 于 20， 小 于 20 则 执行 f 块 花 括 号 中 的 语句 白天 好 ， 人 否则 的 话 运行 晚上 好 ， 运 行 


代码 效果 如 图 13-7 所 示 。 
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单 击 按钮 ， 获 得 基于 时 间 的 问候 。 
点 击 这 里 


日 天 好 


13-7 if-else 选 择 语句 


13.3.3 lfhttp://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/16550/OEBPS/Text/...else 
ifhttp://www.hzcourse.com/resource/readBook?path=/openresources/teach ероок/ипсотргеѕѕед/16550/0ЕВР5/Техі/...еіѕе ВЕ] 


当 需 要 选择 多 套 代码 中 的 一 套 来 运行 时 ， 那 么 可 以 使 用 ifhttp://www.hzcourse.comy/resource/readBook? 
path=/openresources/teach ebook/uncompressed/16550/OEBPS/Text/..http://www.hzcourse.com/resource/readBook? 
path=/openresources/teach ebook/uncompressed/16550/OEBPS/Text/..else ifhttp://www.hzcourse.com/resource/readBook? 


path=/openresources/teach ebook/uncompressed/16550/OEBPS/Text/...else 语 句 。 
基本 语法 : 


Е (条 件 1) 

当 条 件 1 为 true 时 执行 的 代码 
ГА if (条 件 2) 

чан 2 为 true 时 执行 的 代码 


H- 


else 


{ 
当 条 件 1 和 条 件 2 都 不 为 true 时 执行 的 代码 
} 


实例 代码 : 


<!doctype html> 
<html> 

<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

<script type="text/javascript"> 
var d = new Date () ; 

var time = d.getHours () ; 

if (time<12) 

( 


document .write ("<b> 早 上 好 ! </b>"); 
if (time>12 ва time<18) 
Мм 
e 

анасы E E ipp, 
5 
</body> 
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图 13-8 Ifhttp:/ /www.hzcourse.com/resource/readBook?path= /openresources/teach_ebook/uncompressed/16550/OEBPS/Text/...else ifhttp:/ /www.hzcourse.com/resource/readBook? 


path= /openresources/teach_ebook/uncompressed/16550/OEBPS/Text/...else £ ФЕТЕ 6) 


如 果 时 间 小 于 12 点 ， 则 将 发 送 问候 “早上 好 ”,; 如 果 时 间 小 于 18 点 大 于 12 点 ， 则 发 送 问候 “中 午 好 ”; 否则 发 送 问候 “下 午 好 ”， 运 行 代码 效果 如 图 13-8 所 示 。 


13.3.4 switch 多 条 件 选 择 语句 


当 判 断 条 件 比较 多 时 ， 为 了 使 程序 更 加 清晰 ， 可 以 使 用 switch 语 句 。 使 用 switch 语 句 时 ， 表 达 式 的 值 将 与 每 个 case 语 句 中 的 常量 作 比 较 。 如 果 相 匹配 ， 则 执行 该 case 语 句 后 的 代码 ; 如 果 没 有 一 个 case 
的 常量 与 表达 式 的 值 相 匹配 ， 则 执行 default 语 句 。 当 然 ，default 语 句 是 可 选 的 。 如 果 没 有 相 匹 配 的 case 语 句 ， 也 没有 default 语 句 ， 则 什么 也 不 执行 。 


基本 语法 : 


switch (п) 


( 


сазе 1: 
执行 代码 块 1 
break 


Case 2: 
执行 代码 块 2 


break 


fault: 
如 果 n 即 不 是 1 也 不 是 2， 则 执行 此 代码 


de 


} 
语法 解释 : 
switch 后 面 的 (п) 可 以 是 表达 式 ， 也 可 以 (并 通常 ) 是 变量 ,然后 表达 式 中 的 值 会 与 case 中 的 数字 作 比 较 ， 如 果 与 某 个 case 相 匹配 ， 那 么 其 后 的 代码 就 会 被 执行 。 
Switch 语 句 通常 使 用 在 有 多 种 出 口 选择 的 分 支 结 构 上 ， 例 如 信号 处 理 中 心 可 以 对 多 个 信号 进行 响应 。 针 对 不 同 的 信号 均 有 相应 的 处 理 ， 下 面 举例 帮助 理解 。 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

<script type="text/javascript"> 
var d = new Date () 
theDay=d.getDay () 

switch (theDay) 


document.write ("<b> 今 天 是 周 五 了 ! </b>") 


document.write ("<b> 今 天 周 六 ! </b>") 


document .write ("<b> XE EIEE. </b>") 


default: 
document .write ("<b> 周 末 过 得 真 快 ! </b>") 
} 
</script> 
</body> 
</html> 


本 实例 使 用 了 switch 条 件 语句 ， 根 据 星 期 天 数 的 不 同 ， 显 示 不 同 的 输出 文字 。 运 行 代码 效果 如 图 13-9 所 示 。 
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134 ”使 用 循环 语句 


循环 语句 是 指 当 条 件 为 true 时 ， 反 复 执 行 某 一 个 代码 块 的 功能 。JavaScript 中 有 while、do...while、for、forhttp://www.hzcourse.com/resource/readBook? 
path=/openresources/teach_ebook/uncompressed/16550/OEBPS/Text/..in 4 种 循环 语句 。 如 果 事 先 不 确定 需要 执行 多 少 次 循环 时 一 般 使 用 while 或 者 do...while 循 环 ， 而 确定 使 用 多 少 次 循环 时 一 般 使 


用 for 循 环 。for...in 循 环 只 对 数组 类 型 或 者 对 象 类 型 使 用 。 


循环 语句 的 代码 块 中 也 可 以 使 用 break 语 句 来 提前 跳出 循环 ， 使 用 方法 跟 switch 中 的 相同 。 还 可 以 用 continue 语 句 来 提前 跳出 本 次 循环 ， 进 行 下 一 次 循环 。 


13.4.1 for 循环 语句 


сз — Z 


遇 到 重复 执行 指定 次 数 的 代码 时 ， 使 用 for 循 环比 较 合 适 。 在 执行 for 循 环 体 中 的 语句 前 ， 有 三 个 语句 将 得 到 执行 ， 这 三 个 语句 的 运行 结果 将 决定 是 否 要 进入 for 循 环 体 。 


基本 语法 : 


for СМИ; FFRAN; HE) 


语法 说 明 : 


初始 化 总 是 一 个 赋值 语句 ， 它 用 来 给 循环 控制 变量 赋 初 值 ; 条 件 表 达 式 是 一 个 天 系 表达 式 ， 它 决定 什么 时 候 退 出 循环 ; 增 量 定义 循环 控制 变量 每 循环 一 次 后 按 什么 方式 变化 。 这 三 个 部 分 之 间 用 "; “分 


例如 : for (і-1; і<-10; i++) 语句 ; 上 例 中 先 给 赋 初 值 1， 判 断 " 是否 小 于 等 于 10， 若 是 则 执行 语句 ， 之 后 值 增加 1。 再 重新 判断 ， 直 到 条 件 为 假 ， 即 ji> 10 时 ， 结 束 循环 。 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


<title> 无 标题 文档 </title> 
</head> 
<body> 
«рК: </p> 
<button onclick="myFunction () "> 点 击 </button> 
<p id="demo"></p> 
<script> 
function myFunction () 
{ 
var х-""; 
for (var i=0;i<8;i++) 

( 

х-х + "The number is "Ç + i + "<br>"; 

} 
document .getElementById ("demo") .innerHTML=x; 
} 
</script> 
</body> 
</html> 


在 循环 开始 之 前 设置 变量 (var i=0) ， 接 着 定义 循环 运行 的 条 件 (i 必须 小 于 8) ， 在 每 次 代码 块 已 被 执行 后 增加 一 个 值 (i++) ， 运 行 代码 效果 如 图 13-10 所 示 。 


提示 for 箱 环 的 写法 非常 灵活 ， 圆 括号 中 的 语句 可 以 用 来 写 出 技巧 性 很 强 的 代码 ， 读 者 可 以 自行 实验 。 
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13.4.2 while 循环 语 


当 重 复 执 行动 作 的 情形 比较 简单 时 ， 就 不 需要 用 for 循 环 ， 可 以 使 用 while 循 环 代 蔡 。while 循 环 在 执行 循环 体 前 测试 一 个 条 件 ， 如 果 条 件 成 立 则 进入 循环 体 ， 否 则 跳 到 循环 体 后 的 第 一 条 语句 。 
基本 语法 : 


while《〈 条 件 表达 式 ) { 
语句 组 ; 


语法 解释 : 

ЖК К: 必 选 项 ， 以 其 返回 值 作为 进入 循环 体 的 条 件 。 无 论 返 回 什么 样 类 型 的 值 ， 都 被 作为 布尔 型 处 理 ， 为 真 时 进入 循环 体 。 
еш: 可 选项 ， 一 条 或 多 条 语句 组 成 。 

在 while 循 环 体重 复 操作 while 的 条 件 表达 ， 使 循环 到 该 语句 时 就 结束 。 


实例 代码 : 


<script language="javascript'> 
var num = 1; 
while ( num < 50 ) 
( 
document.write( num + " " ); 
num++; 


} 
</script> 


使 用 num 是 否 小 于 50 来 决定 是 否 进入 循环 体 ，num+ + 递增 num， 当 其 值 达 到 50 后 循环 将 结束 ， 运 行 结果 如 图 13-11 所 示 。 
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13.43 do-while 循 环 语句 


Do-while 循 环 是 while 循 环 的 变 体 。 该 循环 会 执行 一 次 代码 块 ， 在 检查 条 件 是 否 为 真 之 前 ， 然 后 如 果 条 件 为 真 的 话 ， 就 会 重复 这 个 循环 。 
基本 语法 : 
do 

( 

语句 组 ; 


} 
while (条 件 ) ; 
实例 代码 : 


2. html> 
<h 
2. 

<meta charset= Е-8"> 

о Те» 

</head> 

<body> 

PHE i 小 于 8 就 一 直 循环 代码 块 。</pP> 
<button onclick="myFunction () "> 点 击 这 里 </button> 
<p id="demo"></p> 

<script> 

function myFunction () 


( 
var х="",1=0; 
do 


( 
х-х + "The number is " + i + "<br>"; 
1++; 


} 
while (1<8) 
document .getElementById ("demo") .innerHTML=x; 


} 
</script> 
</body> 
</html> 


使 用 do-while 循 环 。 该 循环 至 少 会 执行 一 次 ， 即 使 条 件 是 false， 隐 藏 代码 块 会 在 条 件 被 测试 前 执行 ， 只 要 i 小 于 8 就 一 直 循 环 代码 块 ， 运 行 代码 效果 如 图 13-12 所 示 。 


F 
1 


ЕЕ И о-с а 


1 


文件 [Fl) 8E FEN НЕА ТЕП) s#EBH(H) 


Тһе number 15 0 
Тһе number 15 1 
Тһе number 15 2 
The number 15 3 
Тһе number 15 4 
Тһе number 15 5 
Тһе number 15 6 
Тһе number 15 7 


813-12 do-while 1 8) 


13.44 Ыеак сопіпие ==) 


continue 与 break 的 区 别 是 : break 是 彻底 结束 循环 ， 而 continue 是 结束 本 次 循环 。 
1.Break 语 句 
break 语 句 可 用 于 跳出 循环 ，break 语 句 跳 出 循环 后 ， 会 继续 执行 该 循环 之 后 的 代码 。 


实例 代码 : 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<р> break A MA. </p> 

<button onclick="myFunction () ">: Hi </button> 
<р id="demo"></p> 

<script> 

function myFunction () 

{ 
var х="",1=0; 

for (i=0;i<5;i++) 


ТЕ (1==3) 
í break; } 
х=х + "The number is " + i + "<br>"; 


document .getElementByld ("demo") .innerHTML=x; 
} 


</script> 
</body> 
</html> 


当 i==3 时 ， 使 用 break 语 句 停 止 循环 ， 运 行 代码 效果 如 图 13-13 所 示 。 
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2.continue 跳 转 语句 


@ 无 标题 文档 


таш ENH) 


图 13-13 


continue 语 句 的 作用 为 结束 本 次 循环 ， 接 着 进行 下 一 次 是 否 执行 循环 的 判断 。continue 语 句 只 能 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 


<body> 
<p> 单 击 下 面 的 按钮 来 执行 循环 ， 该 循环 会 跳 过 i=4。</p> 
<button onclick="myFunction () "> 点 击 这 里 </button> 
<p id="demo"></p> 
<script> 
function myFunction () 
{ 
var х="",1=0; 
for (i=0;i<10;i++) 
( 
if (i==4) 
{ continue; } 
х=х + "The number is " + i + "<br>"; 
) 
document .getElementById ("demo") .innerHTML=x; 
} 
</script> 
</body> 
</html> 


break? е) 


用 在 while 语 句 、do/while 语 句 、for 语 句 ， 或 者 for-in 语 句 的 循环 体内 ， 在 其 他 地 方 使 用 都 会 引起 错 


本 实例 跳 过 了 值 4， 运 行 代码 效果 如 图 13-14 所 示 。 
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135 ”技能 训练 一 一 禁止 右 击 


在 一 些 网 页 上 ， 当 用 户 右 击 时 会 弹出 警告 窗口 或 者 直接 没有 任何 反应 。 禁 止 右 击 的 具体 操作 步骤 如 下 。 
01 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 13-15 所 示 。 


02 打开 拆 分 视图 ， 在 <head> 和 </head> 之 间 相 应 的 位 置 输入 以 下 代码 ， 如 图 13-16 所 示 。 


<script language=javascript> 
function click( 

f (event.button==2) { 
alert (' 禁 止 右 击 ! ') )) 

function CtrlKeyDown () 1 

if (event.ctrlKey) | 

alert (" 禁 止 使 用 右键 复制 ! ') }} 
document .onkeydown=CtrlKeyDown; 
document .onmousedown=click; 
</script> 


Es 


ر 


图 13-15 ”打开 网 页 文档 
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03 保存 文档 ， 在 浏览 器 中 浏览 效果 ， 如 图 13-17 所 示 。 
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对 象 就 是 一 种 数据 结构 ， 包 含 了 各 种 命名 好 的 数据 属性 ， 而 且 还 可 以 包含 对 这 些 数据 进行 操作 的 方法 函数 ， 一 个 对 象 将 数据 与 方法 组 织 到 一 个 灵巧 的 对 象 包 中 ， 这 样 就 大 大 增强 了 代码 的 模块 性 和 重用 
性 ， 从 而 使 程序 设计 更 加 容易 ， 更 加 轻松 。 


` 对 象 应 用 


' 浏览 器 对 象 


- 内 置 对 象 


常见 事件 


对 象 可 以 是 一 段 文字 、 一 幅 图 片 、 一 个 表单 (Form) 等 。 每 个 对 象 有 它 自 己 的 属性 、 方 法 和 事件 。 对 象 的 属性 是 反映 该 对 象 某 些 特定 的 性 质 的 ， 例 如 字符 串 的 长 度 、 图 像 的 长 宽 、 文 字 框 里 的 文字 等 
对 象 的 方法 能 对 该 对 象 做 一 些 事情 ， 例 如 表单 的 “提交 (Submit) ， 窗 口 的 “滚动 ” (Scrolling) 等 ; 而 对 象 的 事件 能 响应 发 生 在 对 象 上 的 事情 ， 例 如 提交 表单 产生 表单 的 “提交 事件 ”， 点 击 连接 产生 
的 “点 击 事件 ”。 不 是 所 有 的 对 象 都 有 以 上 三 个 性 质 ， 有 些 没有 事件 ， 有 些 只 有 属性 。 


Javascript 中 的 对 象 是 由 属性 (properties) 和 方法 (methods) 两 个 基本 的 元 素 构成 的 。 前 者 是 对 象 在 实施 其 所 需要 行为 的 过 程 中 ， 实 现 信息 的 装载 单位 ， 从 而 与 变量 相关 联 ; 后 者 是 指 对 象 能 够 按 
照 设 计 者 的 意图 而 被 执行 ， 从 而 与 特定 的 函数 相关 联 。 


例如 要 创建 一 个 student (学 生 ) 对 象 ， 每 个 对 象 又 有 这 些 属 性 : пате (4) . address (ШШ) , phone (电话 ) 。 则 在 Javascript 中 可 使 用 自 定义 对 象 ， 下 面 分 步 讲解 。 


(1) 首先 定义 一 个 函数 来 构造 新 的 对 象 sudent， 这 个 函数 成 为 对 象 的 构造 函数 。 


function student (пале, address, phone) // 定义 构造 函数 


this.name=name; // 初 始 化 姓名 属性 
this.address=address; // 初 始 化 地 址 属性 
this.phone=phone; // 初 始 化 电话 属性 


(2) 在 student 对 象 中 定义 一 个 printstudent 方 法 ， 用 于 输出 学 生 信息 。 


linel="name:"+this.name+"<br>Nn"; // 读 取 name 信 息 
line2="address:"+this.address+"<br>\n"; //Ш Шабігезеің 8 
line3="phone:"+this.phone+"<br>Nn" // 读 取 phone 信 息 
document .writeln (linel, line2, line3); // 输 出 学 生 信息 


(3) 修改 student 对 象 ， 在 student 对 象 中 添加 printstudent 国 数 的 引用 。 


this.name=name; // 初 始 化 姓名 属性 
this.address=address; // 初 始 化 地 址 属性 
this.phone=phone; // 初 始 化 电话 属性 | 
this.printstudent=printstudent; // 创 建 printstudent 函 数 的 定义 


(4) 实例 化 一 个 student 对 象 并 使 用 。 


tom=new student (FF ", "南京 路 56 号 ", "010-1234567"; XY BER I Ма М, 
tom.printstudent () // 输出 学 生 信息 


上 面 分 步 讲解 时 为 了 更 好 地 说 明 一 个 对 象 的 创建 过 程 ， 但 真正 的 应 用 开发 则 一 气 呵 成 ， 灵 活 设 计 。 


实例 代码 : 


<script language="javascript"> 
function student (name, address, phone) 


( 


this .паше-паше; // 初始 化 学 生 信 息 
this.address=address; 

this.phone=phone; 

this .printstudent=function () // 创建 printstudent 函 数 的 定义 
{ 


linel="Name:"+this.name+"<br>\n"; // 输出 学 生 信息 
line2="Address:"+this.address+"<br>Nn"; 
line3="Phone:"+this.phone+"<br>Nn" 
document.writeln(linel,line2,line3); 


) 
) 
tom=new student ("/^Ж", "Е Ш 56", "010-12222222"); // 创建 芳 芳 的 信息 
tom.printstudent () // 输出 学 生 信 息 
</script> 


该 代码 是 声明 和 实例 化 一 个 对 象 的 过 程 。 首 先 使 用 function student () 定义 了 一 个 对 象 类 构造 函数 student， 包 含 三 种 信息 ， 即 三 个 属性 姓名 、 地 址 和 电话 。 最 后 两 行 创建 一 个 学 生 对 象 并 输出 其 中 的 
言 息 。This 关 键 字 表示 当前 对 象 即 由 消 数 创建 的 那个 对 象 。 运 行 代码 在 浏览 器 中 预览 效果 如 图 14-1 所 示 。 
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Кате |Á 
Address $E U 56-5 
Phone:010-12222222 
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14.1.2 ”对象 的 引用 


Javascript 为 我 们 提供 了 一 些 非常 有 用 的 常用 内 部 对 象 和 方法 。 用 户 不 需要 用 脚本 来 实现 这 些 功 能 。 这 正 是 基于 对 象 编程 的 真正 目的 。 

对 象 的 引用 其 实 就 是 对 象 的 地 址 ， 通 过 这 个 地 址 可 以 找到 对 象 的 所 在 。 对 象 的 来 源 有 如 下 几 种 方式 。 通 过 取得 它 的 引用 即 可 对 它 进行 操作 ， 例 如 调用 对 象 的 方法 或 读 取 或 设置 对 象 的 属性 等 。 
° 引用 JavaSctipt 内 部 对 象 。 

“ 由 浏览 器 环境 中 提供 。 

` 创建 新 对 象 。 


这 就 是 说 一 个 对 象 在 被 引用 之 前 ， 这 个 对 象 必须 存在 ,否则 引用 将 富 无 意义 ， 而 出 现 错 误 信息 。 从 上 面 的 分 析 我 们 可 以 看 出 JavaScript 引 用 对 象 可 通过 三 种 方式 获取 。 要 么 创建 新 的 对 象 ， 要么 利用 现 
存 的 对 象 。 


实例 代码 : 

<script language="javascript'> 

var date; // 声明 变量 

date=new date () ; // 创建 日 期 对 象 
date=date.toLocaleString( ); // 将 日 期 转换 为 本 地 格式 
alert( date ) 2 // 输出 日 期 

</script> 


这 里 变量 date 引 用 了 一 个 日 期 对 象 ， 使 用 date=date.toLocalestring () а дате в А Н #72 Үоіоса!есвігіпд НЕЕ T е ЕВА IBE], Мате НЕЕ JM 
变 ， 指 向 一 个 string 对 象 。 运 行 代码 在 浏览 器 中 预览 效果 如 图 14-2 所 示 。 
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ВЕ ЕЕ) М AA) ТЕТ) ENH) 
2017Ң-3БІНҢ 13:47:28 


414-2 对象 的 引用 


1413 ЈЕ 


把 对 象 的 所 有 引用 都 设置 为 null， 可 以 强制 性 地 废除 对 象 。 例 如 : 


Var Object=new Object (); 
// 程序 逻辑 
Object=null; 


当 变 量 Object 设 置 为 null 后 ， 对 第 一 个 创建 的 对 象 的 引用 就 不 存 企 了 。 这 意味 着 下 次 运行 无 用 存储 单元 收集 程序 时 ， 该 对 象 将 被 销毁 。 


每 用 完 一 个 对 象 后 ， 就 将 其 废除 ， 来 释放 内 存 ， 这 是 个 好 习惯 。 这 样 还 确保 不 再 使 用 已 经 不 能 访问 的 对 象 ， 从 而 防止 程序 设计 错误 的 出 现 。 


1414 Е 


所 谓 绑 定 ， 即 把 对 象 的 接口 与 对 象 实 例 结合 在 一 起 的 方法 。 
早 绑 定 是 指 在 实例 化 对 象 之 前 定义 它 的 特性 和 方法 ， 这 样 编译 器 或 解释 程序 能 提前 转换 其 代码 。Javascript 不 是 强 类 型 语言 ， 不 支持 早 绑 定 。 


RABE (late binding) 指 的 是 编译 器 或 解释 程序 在 运行 之 前 不 知道 对 象 的 类 型 。 使 用 晚 绑 定 ， 无 须 检查 对 象 的 类 型 ， 只 需要 检查 对 象 是 否 支 持 特 性 和 方法 即 可 。Javascript 所 有 变量 都 是 使 用 晚 绑 定 方 


在 函数 的 作用 域 中 ， 所 有 变量 都 是 “ 晚 绑 定 ”的 ， 即 声明 是 顶级 的 。 例 如 : 


<script language="javascript"> 
var а = 'global'; 

(function () { 

var a; 
alert(a); 

a = '1оса1'; 


0; 
</script> 


在 alert (а) 之 前 只 对 a 作 了 声明 而 没有 赋值 ， 所 以 预览 代码 效果 如 图 14-3 所 示 。 
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142 ”浏览 器 对 象 

使 用 浏览 器 的 内 部 对 象 系统 ， 可 实现 与 HTML 文 档 进行 交互 。 它 的 作用 是 将 相关 元 素 组 织 包装 起 来 ， 提 供给 程序 设计 人 员 使 用 ， 从 而 减轻 编程 人 的 劳动 ， 提 高 设计 Web 页 面 的 能 力 。 浏 览 器 的 内 部 对 象 
主要 包括 以 下 几 个 。 

` 浏览 器 对 象 (navigator) : 提供 有 关 浏 览 器 的 信息 。 

` 文档 对 象 (document) : 包含 了 与 文档 元 素 一 起 工作 的 对 象 。 

` 窗口 对 象 (windows) : 处 于 对 象 层 次 的 最 顶端 ， 它 提供 了 处 理 浏 览 器 窗口 的 方法 和 属性 。 

. 位 置 对 象 (location) : 提供 了 与 当前 打开 的 URL 一 起 工作 的 方法 和 属性 ， 它 是 一 个 静态 的 对 象 。 

` 历史 对 象 (history) : 提供 了 与 历史 清单 有 关 的 信息 。 


编程 人 员 利 用 这 些 对 象 ， 可 以 对 WWW 浏 览 器 环境 中 的 事件 进行 控制 并 处 理 。 在 Javascript 中 提供 了 非常 丰富 的 内 部 方法 和 属性 ， 从 而 减轻 了 编程 人 员 的 工作 ， 提 高 编程 效率 。 这 正 是 基于 对 象 与 面向 
对 象 的 根本 区 别 所 在 。 在 这 些 对 象 系统 中 ， 文 档 对象 属 于 非常 重要 的 ， 它 位 于 最 低层 ， 但 对 于 我 们 实现 Web 页 面 信息 交互 起 着 关键 作用 ， 因 而 它 是 对 象 系统 的 核心 部 分 。 


142.1 Navigator 对 象 


Navigator 对 象 包 含 的 属性 描述 了 正在 使 用 的 浏览 器 。 可 以 使 用 这 些 属 性 进行 平台 专用 的 配置 。 虽 然 这 个 对 象 的 名 称 显而易见 的 是 Netscape 的 Navigator 浏 览 器 ， 但 其 他 实现 了 Javascript 的 浏览 器 也 支 
持 这 个 对 象 。 其 常用 的 属性 如 表 14-1 所 示 。 


表 14-1 navigator 对象 的 常用 属性 


appVersion 浏览 器 的 版 本 


appCodeName 浏览 器 的 代 伍 名 称 


browserLanguage 浏览 如 所 使 用 的 语言 


THI 


platform 浏览 器 系统 所 使 用 的 平台 ， 如 Win32 等 


cookieEnabled МПА ЕНУ cookie 1 EE ТАГ JF 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 浏 览 器 信息 </title> 
</head> 
<body onload=check () > 
<script language=javascript> 
function check() 


( 

name=navigator.appName; 

if (name==' 'Netscape" ) { 

document.write (! 2. j 的 是 Netscape 网 页 浏览 器 <br>") ; } 

else if (name=="Microsof nternet Explorer") í 

document.write ("您 现 在 使 的 是 Microsoft Internet Explorer 网 页 浏览 器 <br>") ; } 

else( 
document .write ("您 现在 使 用 的 是 "t+navigator.appName+" 网 页 浏览 器 <br>") ; } 


} 
</script> 
</body> 
</html> 


这 段 代 码 判 断 浏览 器 的 类 型 ， 在 浏览 器 中 预览 效果 ， 如 图 14-4 所 示 。 


б E БЕРИ ИШ о т га СТАЗЕ ВЕЕ А... 其 
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您 现在 使 用 的 是 Netscape 网 页 浏览 器 
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14.2.2 ”windows 对 象 

windows 对 象 处 于 对 象 层次 的 最 顶端 ， 它 提供 了 处 理 navigator 窗 口 的 方法 和 属性 。JavaScript 的 输入 可 以 通过 window 对 象 来 实现 。 使 用 window 对 象 产生 的 用 于 客户 与 页 面 交互 的 对 话 框 主要 有 三 
种 : 警告 杠 、 确 认 框 和 提示 框 等 ， 这 三 种 对 话 框 使 用 window 对 象 的 不 同方 法 产生 ， 功 能 和 应 用 场合 也 不 大 相同 。 

windows 对 象 常 用 的 方法 主要 如 表 14-2 所 示 。 


表 14-2 windows 对 象 常用 的 方法 


方法 的 含义 及 参数 说 明 

创建 一 个 新 窗口 ，3 个 参数 分 别 用 于 设置 URL 地 址 、 窗 口 
名 称 和 窗口 打开 属性 (一般 可 以 包括 宽度 、 高 度 、 定 位 、 
工具 栏 等 ) 


text 参数 为 窗口 中 显示 的 文字 
оф H 提示 框 + text 为 窗 Г] rH НУ F , defaulttext 参数 用 来 设 
置 默 认 情况 下 显示 的 文字 

将 窗口 移 至 指定 的 位 移 


按 给 定 的 位 移 量 重新 设置 窗口 大 小 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 打 开 浏 览 器 窗口 </title> 
<script type="text/JavaScript"> 


function MM openBrWindow (theURL,winName, features) ( //у2.0 
window.open (theURL,winName, features) ; 


) 

а 

</script> 

</head> 

<body onLoad="MM openBrWindow ('ch.html', '', 'width=400,height=350')"> 打 开 浏 览 器 窗口 
</body> 

</html> 


在 代码 中 加 粗 部 分 代码 应 用 windows 对 象 ， 在 浏览 器 中 预览 效果 ， 弹 出 一 个 宽 为 400 像 素 ， 高 为 350 像 素 的 窗口 ， 如 图 14-5 所 示 。 
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14.2.3 locations 


location 地 址 对 象 描述 的 是 某 一 个 窗口 对 象 所 打开 的 地 址 。 要 表示 当前 窗口 的 地 址 ， 只 需要 使 用 “location” 就 行 了 ; 若 要 表示 基 一 个 窗口 的 地 址 ， 就 使 用 “< 窗口 对 象 >.location”。location 对 象 常 
用 的 属性 如 表 14-3 所 示 。 


表 14-3 ”常用 的 location 属 性 

ІШІ 
返回 地 址 的 协议 ， 取 值 为 http:、https:、file: 等 
返回 地 址 的 主机 名 , 例如 “http: /www.microsoft.com/china/” 地 址 的 主机 名 为 www.microsoft.com 
返回 地 址 的 端口 号 ， 一 般 http 的 端口 号 是 80 
返回 主机 名 和 端口 号 ， 如 www.a.com:8080 
返回 路 人 笃 名， 如 “http: /www.a.com/d/index.html” 的 路 径 为 d/index.html 

gf 


WEE E 
返回 “?” 以 及 以 后 的 内 容 ， 如 果 地 址 里 没有 “?”， 则 返回 空 字符 串 
返回 整个 地 址 ， 即 返回 在 浏览 器 的 地 址 栏 上 显示 的 内 容 


返回 “#” 以 及 以 后 的 内 容 ,如 地 址 为 c.html#chapter4， 则 返回 #chapter4; 如 果 地 址 里 没有 “#”， 


location 对 象 常用 的 方法 主要 包括 : 
' reload () : 相当 于 Internet Explotet 浏 览 器 上 的 “刷新 ”功能 。 
- replace () : 打开 一 个 URL， 并 取代 历史 对 象 中 当前 位 置 的 地 址 。 用 这 个 方法 打开 一 个 URL 后 ， 单 击 浏览 器 的 “后 退 ” 按 钮 将 不 能 返回 到 刚才 的 页 面 。 


提示 ”属于 不 同 协议 或 不 同 主机 的 两 个 地 址 之 间 不 能 互相 引用 对 方 的 location 对 象 ， 这 是 出 于 安全 性 的 需要 。 


14.24 history 


history 对 象 用 来 存储 客户 端的 浏览 器 已 经 访问 过 的 网 址 (URL) ， 这 些 信息 存储 在 一 个 History 列 表 中 ， 通 过 对 History 对 象 的 引用 ， 可 以 让 客户 端的 浏览 器 返回 到 它 曾 经 访问 过 的 网 页 。 其 实 它 的 功 


和 浏览 器 工具 栏 上 的 “后 退 ”和 和 “前进” 按钮 是 一 样 的 。 
history 对 象 常 用 的 方法 主要 包括 : 
- back О: 后 退 ， 与 单 击 “后 退 ” 按 钮 是 等 效 的 。 
- forward () : 前 进 ， 与 单 击 “前 进 ” 按 钮 是 等 效 的 。 
ро О: 该 方法 用 来 进入 指定 的 页 面 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>history 对 象 </title> 


</head> 

<body> 

<p><a href="window 对 象 .html">history 对 象 </a></p> 
<form name="forml" method="post" action=""> 


<input name=" 按 钮 " type="button" onClick="history.back()" value=" 前 进 "> 
<input type="button" уа1ше-" 1 Е" onClick="history. forward () "> 

</form> 

</body> 

</html> 


在 代码 中 加 粗 部 分 代码 应 用 了 history 对 象 ， 在 浏览 器 中 预览 效果 ， 如 图 14-6 所 示 。 
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图 14-6 histoty 对 象 


14.2.5 documenti% 
document 对 象 包括 当前 浏览 器 窗口 或 框架 区 域 中 的 所 有 内 容 ， 包 含 文本 域 、 按 钮 、 单 选 框 、 复 选 框 、 下 拉 框 、 图 片 、 链 接 等 HTML 页面 可 访问 元 素 ， 但 不 包含 浏览 器 的 菜单 栏 
Document 对 象 提供 多 种 方式 获得 HTML 元 素 对 象 的 引用 。JavaScript 的 输出 可 通过 document 对 象 实现 。 在 document 中 主要 有 links、anchor 和 form 3 个 最 重要 的 对 象 。 
- апсһо 7%: 它 是 <aname=…></a> 标 指标 记 在 HITML 源码 中 存在 时 产生 的 对 象 ， 它 包含 着 文档 中 所 有 的 anchot 信 息 。 


links 链接 对 象 : 是 指 用 <ahtef=…></a> 标 记 链 接 一 个 超 文本 或 超 媒 体 的 元 素 作 为 一 个 特定 的 URL。 


、 工 具 栏 和 状态 栏 。 


опт ЖУ: 是 文档 对 象 的 一 个 元 素 ， 它 含有 多 种 格式 的 对 象 储存 信息 ， 使 用 它 可 以 在 JavaSctipt 脚 本 中 编写 程序 ， 并 可 以 用 来 动态 改变 文档 的 行为 。 
document 对 象 的 方法 有 write () 和 writeln () ， 主 要 用 来 实现 在 Web 页 面 上 显示 输出 信息 。 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>document 对 象 </title> 
<script language=javascript> 
function Links() 

( 
n=document.links.length;  // 获 得 链接 个 数 

gains 

Жог(1-0;1<п; j++) 
s=s+document.links[j].href+"Nn"; // 获 得 链接 地 址 
f (s=="") 


==" 没 有 任何 链接 " 


му 


</head> 


<input type="button" value=" 所 有 链接 地 址 " onClick="Links () "><br> 
</form> 

<p><a href="#"> 效 果 1</a><br> 

<a href="#">% R 2</a><br> 

<a href="#"> 效 果 3</a><br> 

</p> 

</body> 

</html> 


在 代码 中 加 粗 部 分 代码 应 用 document 对 象 ， 在 浏览 器 中 预览 效果 ， 如 图 14- 7 所 示 。 
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JavaScript 中 提供 了 一 些 非常 有 用 的 内 部 对 象 作为 该 语言 规范 的 一 部 分 ， 每 一 个 内 部 对 象 都 有 一 些 方法 和 属性 。JavaScript 中 提供 的 内 部 对 象 按 使 用 方式 可 以 分 为 动态 对 象 和 静态 对 象 。 这 些 常见 的 内 置 
对 象 包 括 时 间 对 象 Date、 数 学 对 象 math、 字 符 串 对 象 String、 数 组 对 象 Array 等 ， 下 面 就 详细 介绍 这 些 对 象 的 使 用 。 


14.31 Date 


Date 对 象 是 一 个 经 常 要 用 到 的 对 象 ， 在 做 时 间 输 出 、 时 间 判 断 等 操作 时 都 离 不 开 这 个 对 象 。date 对 象 类 型 提供 了 使 用 日 期 和 时 间 的 共用 方法 集合 


以 使 用 。 


基本 语法 : 


var myDate=new Date ([arguments]); 


date 对 象 会 自动 把 当前 日 期 和 时 间 保 存 为 其 初始 值 ， 参 数 的 形式 有 以 下 5 种 : 


new Date ("month аа, уууу hh:mm:ss"); 
new Date ("month аа, уууу"); 

new Date (yyyy,mth, dd, hh,mm, ss); 

new Date (yyyy,mth, dd) ; 

new Date (ms) ; 


需要 注意 最 后 一 种 形式 ， 参 数 表示 的 是 需要 创建 的 时 间 和 GMT 时 间 1970 年 1 月 1 日 之 间 相 差 的 毫秒 数 。 各 种 参数 的 含义 如 下 。 


- month: 用 英文 表示 的 月 份 名 称 ， 从 January 一 Decembet。 
mth: 用 整数 表示 的 月 份 ， 从 0 (1 月 ) ~11 (12 月 ) o 

. а: 表示 一 个 月 中 的 第 几 天 ， 从 1 一 31。 

‚ уууу: 四 位 数 表示 的 年 份 。 

‘hh: 小 时 数 ， 从 0 (午夜 ) —23 (111,8) o 

' mm: ЖОРЖ, ЛО ~ 59 07) ЖЖ 

‘ss: 秒 数 ， 从 0 一 59 的 整数 。 

- ms: 毫秒 数 ， 为 大 于 等 于 0 的 整数 。 


下 面 是 使 用 上 述 参数 形式 创建 日 期 对 象 的 例子 : 


new Date ("Мау 12,2007 14:18:32"); 
new Date ("May 12, 2007"); 

new Dat _ 4,12, 14,18,32); 

new Date (2007,4,12); 

new Dat 2. 


getYear() 
getMonth() 
getDate() 
getHours() 
getMinutes() 
vetSeconds() 
getMilliseconds( ) 
getUTCDay() 
getUTCFullYear() 
getUTCMonth() 
getUTCDate() 
getUTCHours() 
getUTCMinutes() 
сей I CSeconds() 
getUTCMilliseconds() 
getDay() 
се(Тіте() 

setY earl ) 


setMonth() 
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返回 年 ， 以 0 开始 
返回 月 值 ， 以 0 开始 
返回 日 期 

返回 小 有 时， 以 0 开始 
返回 分 钟 ， 以 0 FIR 
返回 秒 ， 以 0 开始 
返回 到 种 (0-~999) 


依据 国际 时 间 来 得 到 现在 是 星期 儿 (0-6) 


依据 国际 时 间 来 得 到 完整 的 年 份 
依据 国际 时 间 来 得 到 月 а 0—11) 
依据 国际 时 间 来 得 到 日 (] 

依据 国际 时 间 来 得 到 小 = 0-23) 
依据 国际 时 间 来 返回 分 钟 (0-S9) 
依据 国际 时 间 来 返回 秘 (0-59) 
依据 国际 时 间 来 返回 坚 秒 (0-999) 
返回 星期 几 ， 值 为 0-6 


。 用 户 可 以 利用 date 对 象 获取 系统 中 的 日 期 和 时 间 并 加 


返回 从 1970 年 1 月 1 号 0:0:0 到 现在 一 共 花 去 的 毫 


年 份 .2 位 数 或 4 位 数 
设置 月 份 (0~11) 


Ж144 date 对 象 的 常用 方法 


getYear() 返回 年 ， 以 0 开始 

getMonth() 返回 月 值 ， 以 0 开始 

getHours() 返回 小 时 ， 以 0 开始 

getMinutes() 返回 分 钟 ， 以 0 开始 

getSeconds() ка, мо 开始 

getMilliseconds() jz |u|z=#:FP(0-999) 

ве ТСауф) 依据 国际 时 间 来 得 到 现在 是 星期 几 (0-6) 
getUTCFullYear() 依据 国际 时 间 来 得 到 完整 的 年 份 


getUTCMonth() 依据 国际 时 间 来 得 到 月 份 (0~11) 


getUTCDate() 依据 国际 时 间 来 得 到 日 (1~31) 

getUTCHours() 依据 国际 时 间 来 得 到 小 时 (0-23) 

getUTCMinutes() 依据 国际 时 间 来 返回 分 钟 (0-S9) 

getUTCSeconds() 依据 国际 时 间 来 返回 秒 (0~59) 

getUTCMilliseconds() 依据 国际 时 间 来 返回 毫秒 (0-999) 

getDay() 返回 星期 几 ， 值 为 0-6 

getTime() 返回 从 1970 年 1 H 1 5 0:0:0 ЗЕ HEEN 
setY еаг() 设置 年 份 .2 位 数 或 4 位 数 

setMonth() 设置 月 份 (0~11) 


(Же) 


setDate() 

setHours( ) 
өсіМіпшев() 
setSeconds() 
setlime() 
setUTCDate() 

зе TCMonth() 
setUTCFullY ear() 
setUTCHours() 
setUTCMinutes() 
setUTCSeconds() 
setUTCMilliseconds( ) 
toSource() 

toStrine() 

то Птебито() 
toDateString() 
toGMTString() 
toUTCString() 
toLocaleString() 
toLocaleTimeStringe() 
toLocaleDateString () 
UTCO 

уашеО() 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset= -8"> 
<titl сы 
<style type="text/css"> 
<! И 


* 显 示 年 、 ds ` 时 、 分 、 ж» 


E type="text/javascript"> 
<! 


now = new Date () ; 


设置 日 (1~31) 

设置 小 时 数 (0~23 

L 7 (0-59) 

设置 秘 数 (0~59) 

设置 从 1970 年 1 月 1 日 开 妈 的 时 间 ， 坚 秘 数 

根据 世界 时 设置 Date 对 象 中 月 份 的 一 天 (1-31) 
根据 世界 时 设置 Date 对 得 中 的 月 份 (0—11) 

根据 世界 时 设置 Date 对 象 中 的 年 份 〈 四 位 数 宇 ) 

根据 世界 时 设置 Date 对象 中 的 小 时 (0 ~ 23) 

根据 世界 时 设置 Date 对 象 中 的 分 钟 (0 ~ 59) 

根据 世界 时 设置 Date 对 象 中 的 秒 钟 (0 ~ 59) 

根据 世界 时 设置 Date WSH ЗЕР? (0 ~ 999) 

返回 该 对 象 的 源 代码 

把 Date 对 象 转换 为 字符 串 

把 Date 对 象 的 时 间 部 分 转换 为 字符 串 

把 Date ХВ ЯВ МЕРЕ 

使 用 toUTCString0) 方 法 代替 

根据 世界 时 ， 把 Date 对 象 转换 为 字符 串 
根据 本 地 时 间 格 式 ， 把 Date 对 象 转换 为 字符 串 
根据 本 地 时 间 格 式 ， 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 
根据 本 地 时 间 格 式 ， 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 
根据 世界 时 返回 1997 年 1 月 1 日 到 指定 日 期 的 毫秒 数 
返回 Date 对 象 的 原始 值 


if ( now.getYear() >= 2000 ) | document. WE (BOW, getYear ()，" 年 ") ) 
else | document.write (now. 2. Ем) ) 

document.write (now . ge! 'H",now.getDate (), "Н" 
document.write (now.getHours () , "Н", пом. 4. сез 0," ); 
document.write (now.get _ "%"); 


Е-ро 
` 


</script> 


</p> 
</body></html> 


在 浏览 器 中 预览 效果 如 图 14-8 所 示 。 


ЕЛІМЕ о- с. Ero Ki 
УНР Е) ВЕ) 收藏 夫 (A) LAT) 帮助 (H) 
* 显 示 年 、 月 、 R. 8. 7. #9 
20174:3Ң1Ң 1581302771641 
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本 实例 创建 了 一 个 now 对 象 ， 从 而 使 用 now=new Date () 从 电脑 系统 时 间 中 获取 当前 时 间 ， 并 利用 相应 方法 ， 获 取 与 时 间 相 关 的 各 种 数值 。getYear () 方法 获取 年 份 ，getMonth () 方法 获取 月 
份 ，getDate () 方法 获取 日 期 ，getHours () 方法 获取 小 时 ，getMinutes () 获取 分 钟 ，getSeconds () 获取 秒 数 。 


14.3.2 ”数学 对 象 math 


作为 一 门 编程 语言 ， 进 行 数学 计算 是 必 不 可 少 的 。 在 数学 计算 中 经 常会 使 用 到 数学 函数 ， 如 取 绝 对 值 、 开 方 、 取 整 、 求 三 角 函 数值 等 ， 还 有 一 种 重要 的 函数 是 随机 函数 。Javascript 将 所 有 这 些 与 数学 
有 关 的 方法 、 常 数 、 三 角 函 数 以 及 随机 数 都 集中 到 一 个 对 象 里 面 一 一 math 对 象 。math 对 象 是 JavaScript 中 的 一 个 全 局 对 象 ， 不 需要 由 函数 进行 创建 ， 而 且 只 有 一 个 。 


基本 语法 : 


math. 属 
math. 方 


性 
法 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>math 数 字 对 象 </title> 
<script language="JavaScript" type="text/javascript"> 
function roundTmp (х,у) 

{ 

var pow=Math.pow(15, y) ; 

x*= pow;x=Math.round (x) ; 

return x/ pow; 

} 

alert (roundTmp (65.645345654,2)); 
</script> 

</head> 

<body> 

</body> 

</html> 


在 浏览 器 中 预览 效果 如 图 14-9 所 示 。 
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math.round (х) 函数 实际 上 等 价 于 math.floor (х+0.5) 。 但 round 函 数 仅 能 够 将 小 数 四 舍 五 入 为 整数 ， 而 在 实际 开发 中 ， 经 常 需要 四 舍 五 入 到 指定 位 数 。 要 实现 这 个 功能 可 用 如 下 思想 : 将 原 有 小 数 
扩 到 10 的 指定 次 方 倍数 ， 再 四 舍 五 入 ， 最 后 将 小 数 恢 复 到 原来 的 数量 级 。 代 码 的 最 后 以 “65.645345654，2” 四舍五入 到 第 2 位 小 数 为 例 说 明了 函数 的 执行 ， 输 出 结果 为 “65.64444444444444" 


1433 ”字符 串 对 象 String 


String 对象 是 动态 对 象 ， 需 要 创建 对 象 实例 后 才 可 以 引用 它 的 属性 或 方法 ， 可 以 把 用 单 引号 或 双 引 号 括 起 来 的 一 个 字符 串 当 作 一 个 字符 串 的 对 象 实例 来 看 待 ， 也 就 是 说 可 以 直接 在 某 个 字符 串 后 面 加 上 
O 去 调用 string 对 象 的 属性 和 方法 。Sstring 类 定义 了 大 量 操作 字符 串 的 方法 ， 例 如 从 字符 串 中 提取 字符 或 子 串 ， 或 者 检索 字符 或 子 串 。 需 要 注意 的 是 ，Javascript 的 字符 串 是 不 可 变 的 ，string 类 定义 的 方 
法 都 不 能 改变 字符 串 的 内 容 。 


实例 代码 : 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>string 字 符 串 对 象 String</title> 


</head> 

<body> 

<script type="text/javascript"> 

var string="What's your name? " 

document .write ("<p> 大 字号 显示 : " + string.big() + "</p>") 

document .write ВЕ: " + string.small() + "</р>") 

document.wri Е " + string.bold() + "</р>") 

document.write ("<p> 和 斜体 显示 : " + string.italics() + "</p>") 

document .write ("<p> 以 打字 机 文本 显示 字符 串 : " + string.fixed() + "</р>") 
document .write ("<p> 使 用 删除 线 来 显示 字符 串 : " + string.strike() + "</р>") 
document.write ("<p> 使 用 红色 来 显示 字符 串 : " + string.fontcolor ("Red") + "</p>") 
document.write ("<p> 使 用 18 号 字 来 显示 字符 串 : " + string.fontsize(18) + "</p>") 
document .wri И ПИ " + string.toLowerCase() + "</р>") 
document .write ("<p> 把 字符 转换 为 大 写 : " + string.toUpperCase() + "</p>") 
document .write ("<p> 显 示 为 下 标 : " + string.sub() + "</p>") 

document.write ("<p> EINER: " + string.sup() + "</р>") 

document.write ("<p> 将 字符 串 显示 为 链接 : " + string.link("http://www.xxx.com") + "</р>") 
</script> 

</body> 

</html> 


产 strin РР 5їгїпг = Windows Internet Explorer Е [Р] 


| Қа 


а Eod Е мі apa" 1 TALT. 5. 3| html м ++ > DES - F | 2 
сеңі! Әні) жел) KEZA ТАП) FEIN | | 
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太 字 号 亚 示 : What's your name? 

К лү у: Whats yourname? 

相干 显示 : What's vour name? 

RHETT Whats your name? 

HE Fil ТЕЕ: What's your name? 
ERR ат т 382 
ЕНЕГЕ ЗЕТ ЛУЧ FEB: What's your name? 


вянЕзяялуна What's your name? 


把 字符 转换 为 小 写 : what's your паше? 

把 字符 转 措 为 太 写 : WHATS YOUR МАМЕ? 
TET АТ PR чаба уок пате? 

пр HERR Whats you name? 

BIR LT HEEE: What's vont пате? 


完成 ETET fa = Ч ” 
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string 对 象 用 于 操纵 和 处 理 文本 串 ， 可 以 在 程序 中 获得 字符 串 长 度 、 提 取 子 字符 串 ， 以 及 将 字符 串 转 换 为 大 写 或 小 写字 符 。 这 里 通过 string 的 方法 ， 为 字符 串 添加 了 各 种 各 样 的 样式 ， 如 图 14-10 所 示 。 


1434 数组 对 象 Array 

在 程序 中 数据 是 存储 在 变量 中 的 ， 但 是 ， 如 果 数 据 量 很 大 ， 比 如 几 百 个 学 生 的 成 绩 ， 此 时 再 逐个 定义 变量 来 存储 这 些 数据 就 显得 异常 烦琐 ， 如 果 通 过 数组 来 存储 这 些 数据 就 会 使 这 一 过 程 大 大 简化 。 在 
编程 语言 中 ， 数 组 是 专门 用 于 存储 有 序数 列 的 工具 ， 也 是 最 基本 、 最 常用 的 数据 结构 之 一 。 在 Javascript 中 ，Array 对 象 专门 负责 数组 的 定义 和 管理 。 

每 个 数组 都 有 一 定 的 长 度 ， 表 示 其 中 所 包含 的 元 素 个 数 ， 元 素 的 索引 总 是 从 0 开始 ， 并 且 最 大 值 等 于 数组 长 度 减 1， 本 节 将 分 别 介绍 数组 的 创建 和 使 用 方法 。 

基本 语法 : 


数组 也 是 一 种 对 象 ， 使 用 前 移 创 建 一 个 数组 对 象 。 创 建 数组 对 象 使 用 Array 函 数 ， 并 通过 new 操 作 符 来 返回 一 个 数组 对 象 ， 其 调用 方式 有 以 下 3 种 。 


new Array () 
new Array (len) 
new Array ([item0, [item1, [item2,...] 1! 


语法 解释 : 


其 中 第 1 种 形式 创建 一 个 空 数 组 ， 它 的 长 度 为 0; 第 2 种 形式 创建 一 个 长 度 为 len 的 数组 ，len 的 数据 类 型 必须 是 数字 ， 否 则 按照 第 3 种 形式 处 理 ; 第 3 种 形式 是 通过 参数 列表 指定 的 元 素 初 始 化 一 个 数组 。 
面 是 分 别 使 用 上 述 形式 创建 数组 对 象 的 例子 : 


// 创 建 了 一 个 空 数组 对 象 
);  // 创 建 一 个 数组 对 象 ， 包 括 6 个 元 素 
x" ЫР поп) ); /7/ 以 "区 " "у"; "zn3 个 元 素 初 始 化 一 个 数组 对 象 


var objArray=new Array(); 
var objArray=new Array(6 
var objArray=new Array(" 


在 Javascript 中 ， 不 仅 可 以 通过 调用 Array 函 数 创建 数组 ， 而 且 可 以 使 用 方 括号 “[] ”的 语法 直接 创造 一 个 数组 ， 它 的 效果 与 上 面 第 3 种 形式 的 效果 相同 ， 都 是 以 一 定 的 数据 列表 来 创建 一 个 数组 。 这 样 表 
示 的 数组 称 为 一 个 数组 常量 ， 是 在 JavaScript1.2 版 本 中 引入 的 。 通 过 这 种 方式 就 可 以 直接 创建 仪 包含 一 个 数字 类 型 元 素 的 数组 了 。 例 如 下 面 的 代码 : 
var objArray=[ // 创 建 了 一 个 空 数 组 对 象 


1; 
var objArray= [2]; // 创 建 了 一 个 仅 包含 数字 类 型 元 素 \27 的 数组 
var objArray=["a","p","c"]; // 以 "a", "pbp","c"3 个 元 素 初 始 化 一 个 数组 对 象 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 数 组 对 象 Array</title> 
</head> 

<body> 

<script type="text/javascript"> 
function sortNumber(a, b) 

( 

return a - b 

) 


var arr = new Array(6) 


ат [O] = "8" 

arf | 11 = "23" 

arr[2] = "10" 

ат [3] = "20" 

arr[4] = "500" 

arr[5] = "100" 
document.write(arr + "<br />") 
document.write (arr. sort (sortNumber)) 
</script> 

</body> 

</html> 


本 例 使 用 sort () 方法 从 数值 上 对 数组 进行 排序 。 原 来 数组 中 的 数字 顺序 是 “8，23，10，20，500，100”， 使 用 sort 方 法 重新 排序 后 的 顺序 是 “8，10，20，23，100，500”。 最 后 使 用 
document.write 方 法 分 别 输出 排序 前 后 的 数字 ， 如 图 14-11 所 示 。 


› ХЕ 查看 收藏 TE ыш # 一口 X 


„19, 20, 500, 100 
„20, аз, 100, 500 
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事件 的 产生 和 响应 ， 都 是 由 浏览 器 来 完成 的 ， 而 不 是 由 HTML 或 Javascript 来 完成 的 。 使 用 HTML 代 码 可 以 设置 哪些 元 素 响应 什么 事件 ， 使 用 Javascript 可 以 告诉 浏览 器 怎么 处 理 这 些 事件 。 然 而 ， 不 同 


的 浏览 器 所 响应 的 事件 有 所 不 同 ， 相 同 的 浏览 器 在 不 同 版 本 中 所 响应 的 事件 也 会 有 所 不 同 。 前 面 介绍 了 事件 的 大 致 分 类 ， 下 面 通过 实例 具体 剖析 常用 的 事件 : 它们 怎样 工作 的 、 在 不 同 的 浏览 器 中 有 着 怎样 
的 差别 、 怎 样 使 用 这 些 事件 制作 各 种 交互 特效 网 页 。 


14.4.1 onClick 事件 


| 


Click 单 击 事件 是 党 用 的 事件 之 一 ， 此 事件 是 在 一 个 对 象 上 按 下 然后 释放 一 个 鼠标 按钮 时 发 生 ， 它 也 会 发 生 在 一 个 控件 的 值 改变 时 。 这 里 的 单 击 是 指 完 成 按 下 鼠标 键 并 释放 这 一 个 完整 的 过 程 后 产生 的 事 
使 用 单 击 事件 的 语法 格式 如 下 : 


基本 语法 : 


onCl1ick= 函 数 或 是 处 理 语句 


实例 代码 : 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 

</head> 

<body><input type="submit" name="Submit" value=" 打 印 本 页 " 
onClick="javascript:window.print()"> 

</body> 

</html> 


本 段 代码 运用 Click 事 件 ， 设 置 当 单 击 按钮 时 实现 打印 效果 。 运 行 代码 如 图 14-12 所 示 和 图 14-13 所 示 。 支 持 该 事件 的 JavaScript 对 象 有 Button、document、checkbox、link、radio、reset、submit。 


EN o ~- c l білерге Ш 5-0 


WHA FEE) РЕМ) HRA LRT) ЕН) 


+ 100% + 


914-12 ”浏览 效果 


тш 打印 


选择 打印 机 
шіш Fax 


= Microsoft Print to PDF 


û келген Вто тше кета Lasin a үнемі Р РР бейне s а а ететі Fey Las uqa И РР РР ari 


Fë Місгозой XPS Document Writer 


u 
Mama a mm и mad mnsa Û Û aun Ба рен Е исши иво û Û ны i a mna nun LL Û mn Û aan в Û am Û a mad TL 


PEE BET) 


Гр | BWAR | 


во TE 


BSO) 


Ж АТТЕЗАЙТШШГЕНЫ. 如 , 5-12 11 22 33 


144,2 onchange 事件 


| me || а аА 


61413 ”打印 页 面 


变 事 件 (change) 通常 在 文本 框 或 下 拉 列 表 框 中 激发 。 在 下 拉 列 表 框 中 ， 只 要 修改 了 可 选项 ， 就 会 激发 change 事 件 ; 在 文本 框 中 ， 只 有 修改 了 文本 框 中 的 文字 并 在 文本 框 失去 焦点 时 才 会 被 激发 。 
基本 语法 : 


on change= 函 数 或 是 处 理 语句 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 

</head> 

<body><FORM name=SearchForm action= > 
<TBODY> 

<TR> 

<TD align=middle width="100%"> 


<input name="textfield" type="text" size="20" onchange=alert ("输入 搜索 内 容 ")> 


</TD> 
</TR> 
<TR> 


<TD align=middle width="100%"><SELECT size=1 name=Search> <OPTION value=Name selected> 按 名 称 </OPTION> <OPTION value=Singer> 按 歌手 </OPTION> <OPTION value=Flasher> 按 作者 </OPT] 


<input type="submit" name="Submit2" value=" 提 交 " /></T 
</TR></FORM> 

</body> 

</html> 


D> 


[ON>< 


本 段 代 码 在 一 个 文本 框 中 使 用 了 onchange=alert ("输入 搜索 内 容 ") ， 来 显示 表单 内 容 变化 引起 change 事 件 执行 处 理 效 果 。 这 里 的 change 结 果 是 弹出 提示 信息 框 。 运 行 代码 后 效果 如 图 14-14 所 示 。 
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图 14-14 ”change 事 件 


144.3 ”onSelect 事 件 


Select 事 件 是 指 当 文本 框 中 的 内 容 被 选中 时 所 发 生 的 事件 。 
基本 语法 : 


onSelect= 处 理 函 数 或 是 处 理 语 句 


实例 代码 : 

<script language="javascript"> // 脚本 程序 开始 

function strCon (str) // 连接 字符 串 

{ if (str1!=' 请 选择 ' // 如 果 选 择 的 是 默认 项 
{forml .text.value=" 您 选择 的 是 : "+str; // 设置 文本 框 提示 信息 } 
else // 否则 
{forml .text .value=""; // 设置 文本 框 提示 信息 } 

} 

</script> 

<form id="forml" name="forml" method="post" action=""> 

<label> 

<textarea name="text" cols="50" rows="2" onSelect="alert (' 您 想 复制 吗 ? ') "></textarea> 

</label> 

<p><label> 

<select пате="ѕе1есі1" onchange="strAdd (this.value)" > 


<option value=" 请 选择 "> 请 选择 </option> 
<option value=" 北 京 "> 北京 </option> 
<option value=" 上 海 "> 上 海 </option> 
<option value=" 广 州 "> 广 州 </option> 
<option value=" 深 圳 "> 深圳 </option> 
<option value=" 哈 尔 滨 "> 哈 尔 滨 </option> 
<option value=" 其 他 "> 其 他 </option> 
</select> 

</1аре1></р> 

</form> 


本 段 代码 定义 函数 处 理 下 拉 列 表 框 的 选择 事件 ， 当 选择 其 中 的 文本 时 输出 提示 信息 。 运 行 代 码 效 果 如 图 14-15 所 示 。 
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14.4.4 onFocus 事 件 


得 到 焦点 (focus) 是 指 将 焦点 放 在 了 网 页 中 的 对 象 之 上 。Focus 事 件 即 得 到 焦点 ， 通 党 是 指 选 中 了 文本 框 等 ， 并 且 可 以 在 其 中 输入 文字 。 
基本 语法 : 


onfocus= 处 理 函 数 或 是 处 理 语句 


实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>onFocus 事 件 </title> 
</head> 
<body> 
国内 城市 : 
<form name="forml" method="post" action=""> 
<p> 
<label> 
<input type="radio" name="RadioGroupl" value=" 北 京 "onfocus=alert ("选择 北京 ! ")> 
北京 </label> 
<рг> 
<1аре1> 
<input type="radio" name="RadioGroupl" value=" 天 津 "onfocus=alert (" 选 择 天 津 ! ") > 
天 津 </label> 
<рг> 
<label> 
<input type="radio" name="RadioGroupl" value=" 上 海 "onfocus=alert ("选择 上 海 ! ")> 
上 海 </1label> 


<label> 
<input type="radio" name="RadioGroupl" value=" 深 圳 "onfocus=alert (" 选 择 深 圳 ! ")> 深圳 </label> 


<label> 
<input type="radio" name="RadioGroupl" value=" JN "onfocus=alert (" 选 择 广州 ! ")> 
Г Н</1аре1> 
<рг> 
</р> 
</form> 
</body> 
</html> 


在 代码 中 加 粗 部 分 代码 应 用 了 focus 事 件 ， 选 择 其 中 的 一 项 ， 弹 出 选择 提示 的 对 话 框 ， 如 图 14-16 所 示 。 
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1445 onLoad 事 件 


加 载 事 件 (load) 与 卸载 事件 (unload) 是 两 个 相反 的 事件 。 在 HTML 4.01 中 ， 只 规定 了 body 元 素 和 frameset 元 素 拥有 加 载 和 仓 载 事件 ， 但 是 大 多 浏览 器 都 支持 img 元 素 和 object 元 素 的 加 载 事件 。 
以 body 元 素 为 例 ， 加 载 事件 是 指 整个 文档 在 浏览 器 窗口 中 加 载 完 毕 后 所 激发 的 事件 。 印 载 事件 是 指 当前 文档 从 浏览 器 窗口 中 印 载 时 所 激发 的 事件 ， 即 关闭 浏览 器 窗口 或 从 当前 网 页 跳 转 到 其 他 网 页 时 所 激发 
的 事件 。Load 事 件 语法 格式 如 下 。 


基本 语法 : 


onLoad= 处 理 函 数 或 是 处 理 语 名 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>onLoag 事 件 </title> 

<script type="text/JavaScript"> 

Ss 

function MM popupMsg (msg) { //v1.0 
alert (msg) ; 


) 

//--> 

</script> 

</head> 

<body onLoad="MM popupMsg (' 欢 迎 光 临 ! ')"> 
</body> 

</html> 


在 代码 中 加 粗 部 分 代码 应 用 了 onLoad 事 件 ， 在 浏览 器 中 预览 效果 时 ， 会 自动 弹出 提示 的 对 话 框 ， 如 图 14-17 所 示 。 
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鼠标 移动 事件 包括 三 种 ， 分 别 为 nouseover、mouseout 和 mousemove。 其 中 ，mouseove 是 当 鼠 标 移 动 到 对 象 之 上 时 所 激发 的 事件 ，mouseout 是 当 鼠 标 从 对 象 上 移 开 时 所 激发 的 事 


mousemove 是 鼠标 在 对 象 上 移动 时 所 激发 的 事件 。 


基本 语法 : 


onMouseover= 处 理 函 数 或 是 处 理 语句 
onMouseout= 处 理 函 数 或 是 处 理 语 名 
onMouseout= 一 个 对 象 表达 式 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>onMouseOver 事 件 </title> 
<style type="text/css"> 


== 

#Layer1 {position:absolute;width:257px;height:141px;z-index:1;visibility: hidden; | 
--> 

</style> 

<script type="text/JavaScript"> 

а 


function ММ findObj (n, а) { //v4.01 
var р,1,х; 1Е(!а) d=document; if((p=n.indexOf ("?"))>0&&parent.frames.lenoth) { 

а=рагепё . Ёгатеѕ [n.substring (р+1) | .document; n=n.substring (0,p);} 

Е(! (x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d. forms [i] [n]; 

or (i=0; !x&&d.layers&&i<d.layers.length;i++) х-ММ findObj (n,d.layers [i] .document) ; 

Е (|ж && d.getElementById) x=d.getElementById(n); return x; 


| Ев Го 


) 
function ММ showHideLayers() { //v6.0 

var i,p,v,obj,args=MM showHideLayers.arguments; 
for (і-0; i<(args.length-2); i+=3) if ((obj=MM findObjí(args[i]))!=null) { v=args[i+2]; 


if (obj.style) ( obj=obj.style; у= (у= show')?'visible': (v=='hide')?'hidden':v; } 
obj.visibility=v; ) 


) 

//--> 

</script> 

</head> 

<body> 

<input name="Submit" type="submit" 

onMouseOver="MM showHideLayers('Layerl','','show')" value=" 显 示 图 像 " /> 
<div id="layerl"><img src="3.jpg" width="600" height="400" /></div> 
</body> 

</html> 


在 代码 中 加 粗 部 分 代码 应 用 了 onMouseOver 事 件 ， 在 浏览 器 中 预览 效果 ， 将 光标 移动 到 “显示 图 像 ” 按 钮 的 上 方 ， 显 示 图 像 ， 如 图 14-18 所 示 。 
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图 14-18 ” onMouseOver 事件 


14.4.7 onblur 事 件 


失去 焦点 事件 正好 与 获得 焦点 事件 相对 ， 失 去 焦点 (blur) 是 指 将 焦点 从 当前 对 象 中 移 开 。 当 text 对 象 、textarea 对 象 或 select 对 象 不 再 拥有 焦点 而 退 到 后 台 时 ， 引 发 该 事件 。 
<!doctype html> 
<html> 


<meta charset="utf-8"> 
<title>onBlur 事 件 </title> 
<script type="text/JavaScript"> 
<!-- 
function ММ рорирМва (msg) { //у1.0 
alert (msg) ; 
} 
/> 
</script> 
</head> 
<body> Е 
<p> 用 户 注册 : </p> | | 
<p> 用 户 名 : <input name="textfield" type="text" onBlur="MM рорирМза (' 文 档 中 的 “用 户 名 “文本 域 失 去 焦点 ! ")" /> 
</p> 
<p> 密 码 : <input name="textfield2" type="text" onBlur="MM popupMsg (' 文 档 中 的 "密码 “文本 域 失 去 焦点 ! ')" /> 
</p> 
</body> 
</html> 


在 代码 中 加 粗 部 分 代码 应 用 了 onBlur 事 件 ， 在 浏览 器 中 预览 效果 ， 将 光标 移动 到 任意 一 个 文本 框 中 ， 再 将 光标 移动 到 其 他 的 位 置 ， 就 会 弹出 一 个 提示 对 话 框 ， 说 明 某 个 文本 框 失去 焦点 ， 如 图 14-19 所 


个 。 
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14.4.8 onsubmit 事 件 和 onreset 事 件 

表单 提交 事件 (onsubmit) 是 在 用 户 提交 表单 时 (通常 使 用 “提交 ”按钮 ， 也 就 是 将 按钮 的 type 属 性 设 为 submit) ， 在 表单 提交 之 前 被 触发 ， 因 此 ， 该 事件 的 处 理 程序 通过 返回 false 值 来 阻止 表单 的 
提交 。 该 事件 可 以 用 来 验证 表单 输入 项 的 正确 性 。 

表单 重 置 事件 (onreset) 与 表单 提交 事件 的 处 理 过 程 相同 ， 该 事件 只 是 将 表单 中 的 各 元 素 的 值 设 置 为 原始 值 。 它 能 够 清空 表单 中 的 所 有 内 容 。onreset 事 件 和 属性 的 使 用 频率 远 低 于 onsubmit。 


基本 语法 : 


<form name="formname" onReset="return Funname" 
onsubmit="return Funname " ></form> 


formname: 表单 名 称 。 
Ғиппате: 函数 名 或 执行 语句 ， 如 果 是 函数 名 ， 在 该 函数 中 必须 有 布尔 型 的 返回 值 。 


提示 ”在 Web 站 点 中 填写 完 表单 ， 然 后 单 击发 送 表 单数 据 的 按钮 ， 此 时 将 会 显示 一 条 消息 告诉 你 没有 输入 菜 些 数据 或 者 输入 错误 的 数据 。 当 这 种 情况 发 生 时 ， 很 可 能 是 遇 到 了 使 用 onsubmit 属 性 的 表单 ， 
该 属性 在 浏览 器 中 运行 一 段 脚本 ， 在 表单 被 发 送 给 服务 器 之 前 检查 所 输入 数据 的 正确 性 。 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>onsubmit 事 件 </title> 


</head> 
<body><form name="testform" action="" 
onsubmit="alert ("ИК ' + testform.fname.value +!!!) "> 


请 输入 名 字 。<br /> 
<input type="text" name="fname" /> 
<input type="submit" value=" 提 交 " /> 


</body> 
</html> 


在 本 例 中 ， 当 用 户 点 击 提交 按钮 时 ， 会 显示 一 个 对 话 框 ， 如 图 14-20 所 示 。 
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1449 ”onresize 页 面 大 小 事件 


页 面 的 大 小 事件 (опгесіге) 是 用 户 改 变 浏 览 器 的 大 小 时 触发 事件 处 理 程序 ， 它 主要 用 于 固定 浏览 器 的 大 小 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8 

<title> 固 定 浏 И рио 

</head> 

<body> 

<center><img src="4.jpg"></center> 

<script language="JavaScript"> 

Function fastness () { 
window.resizeTo (850, 650); 


} 

document .body.onresize=fastness; 
document .body.onload=fastness; 
</script> 

</body> 

</html> 


上 面 的 实例 是 在 用 户 打开 网 页 时 ， 将 浏览 器 以 固定 的 大 小 显示 在 屏幕 上 ， 当 用 鼠标 拖 动 浏览 器 边框 改变 其 大 小 时 ， 浏 览 器 将 恢复 原始 大 小 ， 如 图 14-21 所 示 。 
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图 14-21 onresize 页 面 大 小 事件 


14410 ”键盘 事件 


鼠标 和 键盘 事件 是 在 页 面 操作 中 使 用 最 频繁 的 操作 ， 可 以 利用 键盘 事件 来 制作 页 面 的 快捷 键 。 键 盘 事 件 包含 onkeypress、onkeydown 和 onkeyup 事 件 。 
onkeyptess 事 件 是 在 键盘 上 的 菜 个 键 被 按 下 并 且 释 放 时 和 触发 此 事件 的 处 理 程序 ， 一 般 用 于 键盘 上 的 单 键 操 作 。 
` Onkeydown 事 件 是 在 键盘 上 的 菜 个 键 被 按 下 时 触发 此 事件 的 处 理 程序 。 


- Onkeyup 事 件 是 在 键盘 上 的 菜 个 键 被 按 下 后 松 开 时 触发 此 事件 的 处 理 程 序 ， 一 般 用 于 组 合 键 的 操作 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 键 盘 事 件 </title> 


<body> 

<img src="5.jpg" width="688" height="486" /> 

<script language="javascript"> 

<!== 

function Refurbish () { 

if (window.event.keyCode==97)(  // 当 在 键盘 中 按 A 键 时 
location.reload () ; // 刷 新 当前 页 


} 


} 
document .onkeypress=Refurbish; 


//==> 


</script> 
</body> 
</html> 


上 面 的 实例 是 应 用 键盘 中 的 A 键 ， 对 页 面 进行 刷新 ， 而 无 须 用 鼠标 在 IE 浏 览 器 中 单 击 “ 刷 新 ”按钮 ， 如 图 14-22 所 示 。 
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Document 对 象 提供 了 几 个 属性 ， 如 fgColor、bgColor 等 来 设置 Web 页 面 的 显示 颜色 ， 
色 和 字体 颜色 。 


实例 代码 : 


<!doctype html> 
<html> 
<head> 

<meta charset="utf-8"> 

<tit1le> 鼠 标 放 上 链接 改变 网 页 背景 颜色 </title> 
<SCRIPT LANGUAGE="JavaScript"> 

function goHist (a) 


{ 


} 

</script> 

</head> 

E 

<cent 

БЕТТІ 链接 上 看 看 ! </п2> 

<table рогдег-1 borderlight=green style="border-collapse: 
cellpadding="5" cellspacing="0"> 

<tr><td align=center><a href="#" onMouseOver="document.boColor='yellow'"> 
黄色 </a> 

<a href="#" onMouseOver="document.bgColor='red'">KZLf6</a> 
f="#"onMouseOver="document .bgColor='green' "> 绿色 </a> 


history.go (a); 


collapse" 
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它们 一 般 定 义 在 <body> 标 记 中 ， 在 文档 布局 确定 之 前 完成 设置 。 


% 100% = 


这 几 个 属性 的 值 可 以 改变 


页 背 


运行 代码 ， 在 浏览 器 中 预览 效果 如 图 14-23 所 示 。 
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155: ”HTML 入 门 


在 制作 网 页 时 ， 大 都 采用 一 些 专门 的 网 页 制作 软件 ， 如 FrontPage、Dreamweaver。 这 些 工 具 都 是 所 见 即 所 得 ， 非 常 方 便 。 使 用 这 些 编辑 软件 工具 可 以 不 用 编写 代码 。 在 不 熟悉 HTML 语 言 的 情况 下 ， 
照样 可 以 制作 网 页 。 这 是 网 页 编辑 软件 的 最 大 成 功 之 处 ， 但 也 是 它们 的 最 大 不 足 之 处 ， 受 软件 自身 的 约束 ， 将 产生 一 些 垃圾 代码 ， 这 些 垃圾 代码 将 会 增 大 网 页 体积 ， 降 低 了 网 页 的 下 载 速度 。 一 个 优秀 的 网 


页 设计 者 应 该 在 掌握 可 视 化 编辑 工具 的 基础 上 ， 进 一 步 熟 悉 HTML 语 言 以 便 清除 那些 垃圾 代码 ， 从 而 达到 快速 制作 高 质量 网 页 的 目的 。 这 就 需要 对 HTML 有 个 基本 的 了 解 ， 因 此 具备 一 定 的 HTML 语 言 的 基本 
知识 是 必要 的 。 


本 章 重点 
- 掌握 HTML 的 基本 语法 


:常见 的 HIML 标签 


151 HTML 的 基本 证 
编写 HTML 文 件 时 ， 必 须 遵 循 一 定 的 语法 规则 。 一 个 完整 的 HTML 文 件 由 标题 、 段 落 、 表 格 和 文本 等 各 种 伐 入 的 对 象 组 成 ， 这 些 对 象 统称 为 元 素 。 HTML 使 用 标签 来 分 隔 并 描述 这 些 元 素 ， 整 个 HTML 文 
件 其 实 就 是 由 元 素 与 标签 组 成 的 。 


15.1.1 ”网 页 结构 


HTML 的 任何 标签 都 由 “<” 和 “>” 围 起 来 ， 如 <HTML>。 在 起 始 标签 的 标签 名 前 加 上 符号 “/” 便 是 其 终止 标签 , 如 </HTML> ， 夹 在 起 始 标签 和 终止 标签 之 间 的 内 容 受 标签 的 控制 。 超 文本 文档 分 


为 头 和 主体 两 部 分 ， 在 文档 头 部 ， 对 文档 进行 了 一 些 必要 的 定义 ， 文 档 主体 是 要 显示 的 各 种 文档 信息 。 


基本 语法 : 


<html> 

<head> И д 5Е Ин Н</пеад> 
<body> 网 页 主体 正文 部 分 </body> 

</html> 


语法 说 明 : 


其 中 <html> 在 最 外 层 ， 表 示 这 对 标签 间 的 内 容 是 HTML 文 档 ， 一 个 HTML 文 档 总 是 以 <html> 开 始 ， 以 </html> 结 束 。<head> 之 间 包 括 文档 的 头 部 信息 ， 如 文档 标题 等 ， 若 不 需 头 部 信息 则 可 省 略 此 
标签 。< body> 标 签 一 般 不 能 省 略 ， 表 示 正 文 内 容 的 开始 。 


下 面 就 以 一 个 简单 的 HTML 文 件 来 熟悉 HTML 文 件 的 结构 。 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>HTMIL 的 基本 语法 </title> 
</head> 
<body> 
<p> 简 单 的 HTMIL 文 件 结构 1</p> 
</body> 
</html> 


这 一 段 代 码 是 使 用 HTML 中 最 基本 的 几 个 标签 所 组 成 的 ， 运 行 代码 在 浏览 器 中 预览 效果 ， 如 图 15-1 所 示 。 


ЖЕЛЕРІ O - с | @ HTMt 的 基本 语法 
文件 (站 RRO EEV KERA ТАП) =н 


简单 的 HTML 文 忻 结构 ! 


图 15-1 HTML %54 
下 面 解释 一 下 上 面 的 例子 。 
.HTML 文件 就 是 一 个 文本 文件 。 文 本 文件 的 后 缀 名 是 .txt， 而 HIML 的 后 组 名 是 .html。 


"<ldoctype html> 代 表 文 档 类 型 ， 大 致 的 意思 就 是 遵循 严格 的 XHTML 的 格式 书写 。 


-HTML 文档 中 ， 第 一 个 标签 是 <html> ， 这 个 标签 告诉 浏览 器 这 是 HITML 文档 的 开始 。 

HTML 文档 的 最 后 一 个 标签 是 </html> ， 这 个 标签 告诉 浏览 器 这 是 HTML 文档 的 终止 。 

` 在 <head> 和 </head> 标 签 之 间 的 文本 是 头 信息 ， 在 浏览 器 窗口 中 ， 头 信息 是 不 被 显示 在 页 面 上 的 。 
- 在 <title> 和 </title> 标 签 之 间 的 文本 是 文档 标题 ， 它 被 显示 在 浏览 器 窗口 的 标题 栏 。 

- 在 <body> 和 </body> 标 签 之 间 的 文本 是 正文 ， 会 被 显示 在 浏览 器 中 。 


Ж<р> Жж</р> 标签 代表 段落 。 


15.1.2 ”创建 HTMLX 件 


HTML 是 一 个 以 文字 为 基础 的 语言 ， 并 不 需要 什么 特殊 的 开发 环境 ， 可 以 直接 在 Windows 自 带 的 记事 本 中 编写 。HTML 文 档 以 .html 为 扩展 名 ， 将 HTML 源 代码 输入 到 记事 本 并 保存 ， 可 以 在 浏览 器 中 打 
开 文 档 以 查看 其 效果 。 使 用 记事 本 手工 编写 HTML 页 面 的 具体 操作 步骤 如 下 。 


01 在 Windows 系 统 中 ， 打 开 记 事 本 ， 在 记事 本 中 输入 以 下 代码 ， 如 图 15-2 所 示 。 


<!doctype html> 
<html> 


<meta charset="utf-8"> 

<title> 创 建 HTMI 文 件 </title> 

</head> 

<body> 

<img src="ht.jpg" width="1007" height="722" alt=""/> 
</body> 

</html> 


提示 ”关于 还 不 知道 怎么 新 建 记 事 本 的 读者 ， 在 电脑 桌面 上 或 者 “我 的 电脑 ”硬盘 中 空白 地 方 右 击 ， 执 行 “ 新 建 ”| “文本 文档 ”命令 。 


02 当 编 辑 完 HTML 文 件 后 ， 执 行 “ 文 件 ”| “另存 为 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 将 它 存 为 扩展 名 为 .htm 或 .html 的 文件 即 可 ， 如 图 15-3 所 示 。 


| 新 建交 本 
УНР ЗЕЕ) WAO) FEV ШЕТІН) 
<! Чостуре html> 
<html> 
<head> 
<meta charset= utf-8 > 
<title> 创 建 HTML 交 件 <Atitley 
head? 
<body> | | | 
<img sre= ht. jpg width=” 1007” height= 722 
</body> 
usa 


4152 在 记事 本 中 输入 代码 
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4153 ”保存 文件 
提示 注意 是 “另存 为 ”， 而 不 是 “保存 ”， 因 为 如 果 选 择 “ 保 存 ” 的 话 ，Windows 系 统 会 默认 地 把 它 存 为 .txt 记 事 本 文件 。.html 是 个 扩展 名 ， 注 意 是 个 点 ， 而 不 是 句号 。 


03 单 击 “ 保 存 ” 按 钮 ， 这 时 该 文本 文件 就 变 成 了 HTML 文件 ， 在 浏览 器 中 浏览 效果 如 图 15-4 所 示 。 
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图 15-4 浏览 网 页 效果 


152 ”常见 的 HTML 标 签 


学 习 HTML 教 程 最 常用 的 是 学 习 HTML 标 签 ， 这 里 介绍 一 下 最 常用 到 的 HTML 标 签 。 


15.2.1 文本 类 标签 


<font> 标 记 用 来 控制 字体 、 字 号 和 颜色 等 属性 ， 它 是 HTML 中 最 基本 的 标记 之 一 ， 掌 握 好 <font> 标 记 的 使 用 是 控制 网 页 文本 的 基础 ， 可 以 用 来 定义 文字 的 字体 (Face) 、 大 小 (Size) 和 颜色 
(Color) ， 也 就 是 它 的 三 个 参数 。 


Face 属 性 规定 的 是 字体 的 名 称 ， 如 中 文字 体 的 “宋体 ” “楷体 ” “隶书 ”等 。 可 以 通过 字体 的 face 属 性 设置 不 同 的 字体 ， 设 置 的 字体 效果 必须 在 浏览 器 中 安装 相应 的 字体 后 才 可 以 正确 浏览 ， 否 则 有 些 
特殊 字体 会 被 浏览 器 中 的 普通 字体 所 代 蔡 。 


基本 语法 : 


font face=" 字 体 样式 ">.....</ 


语法 说 明 : 


ГопЕ> 


face 属 性 用 于 定义 该 段 文本 所 采用 的 字体 名 称 。 如 果 浏 览 器 能 够 在 当前 系统 中 找到 该 字体 ， 则 使 用 该 字体 显示 。 


实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 文 本 类 标签 </title> 

</head> 

<body> 

<p><font face=" 微 软 雅 黑 "> 人 生 应 该 如 蜡烛 一 样 ， 从 顶 燃 到 底 ， 一 直 都 是 光明 的 。</font></p> 
<p><font Size="20"> 沉 沉 的 黑夜 都 是 白天 的 前 奏 。 </font></p> 

<p><font Color="#FF0000"> 常 求 有 利 别人 ， 不 求 有 利 自己 。</font><br></p> 
</body> 

</html> 


在 代码 中 加 粗 部 分 的 代码 标记 是 设置 文字 的 字体 、 大 小 、 颜 色 ， 在 浏览 器 中 预览 可 以 看 到 不 同 的 字体 效果 ， 如 图 15-5 所 示 。 
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图 15-5 文本 类 标签 


1522 文本 类 标签 : МАЛИН, КИК ЕЕ 


<b> 和 <strong> 是 HTML 中 格式 化 粗 体 文本 的 最 基本 元 素 。 在 <b> 和 </b> 之 间 的 文字 或 在 <strong> 和 </strong> 之 间 的 文字 ， 在 浏览 器 中 都 会 以 粗 体 字体 显示 。 该 元 素 的 首尾 部 分 都 是 必需 的 ， 如 
果 没 有 结尾 标记 ， 则 浏览 器 会 认为 从 <b> 开 始 的 所 有 文字 都 是 粗 体 。 


基本 语法 : 


<p> 加 粗 的 文字 </b> 
<strong> 加 粗 的 文字 </strong> 


语法 说 明 : 

在 该 语法 中 ， 粗 体 的 效果 可 以 通过 <b> 标 记 来 实现 ， 还 可 以 通过 < strong> 标 记 来 实现 。<b> 和 <strong> 是 行内 元 素 ， 它 可 以 插入 到 一 段 文本 的 任何 部 分 。 

<i>、<em> 和 <cite> 是 HTML 中 格式 化 斜体 文本 的 最 基本 元 素 。 在 <i> 和 </i> 之 间 的 文字 、 在 <em> 和 </em> 之 间 的 文字 或 在 <cite> 和 </cite> 之 间 的 文字 ， 在 浏览 器 中 都 会 以 斜体 字体 显示 。 
基本 语法 : 


<i> 和 斜体 文字 </i> 
<em> 和 斜体 文字 </em> 
<Cite> 斜 体 文 字 </cite> 


语法 说 明 : 


和 斜体 的 效果 可 以 通过 <i> 标 记 、<em> 标 记 和 和 <cite> 标记 来 实现 。 一 般 在 一 篇 以 正体 显示 的 文字 中 用 和 斜体 文字 起 到 醒目 、 强 调 或 者 区 别 的 作用 。 


<Uu> 标 记 的 使 用 和 粗 体 以 及 和 斜体 标记 类 似 ， 它 作用 于 需 加 下 划 线 的 文字 。 


基本 语法 : 
<u> 下 划 线 的 内 容 </u> 
语法 说 明 : 


该 语法 与 粗 体 和 斜体 的 语法 基本 相同 


实例 代码 : 


<!doctype html> 
<html> 

<head> 

<meta charset="ut шы 

<title> 文 本 加 粗 、 和 斜体 与 下 划 线 </title> 
</head> 

<body> 

<p><strong> 志 不 强 者 智 不 达 。</strong></p> 
<р><еп>% Н К, ЖИВА А. </em></p> 


2227... 死去 犹 能 作 鬼 雄 。</u><BR> 
</p> 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 标记 <strong> 为 设置 文字 的 加 粗 、<em> 为 设置 斜体 、<u> 为 设置 下 划 线 的 效果 ， 在 浏览 器 中 预览 效果 ， 如 图 15-6 所 示 。 
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15.23 ”表格 标签 
表格 由 行 、 列 和 单元 格 3 部 分 组 成 ， 一 般 通 过 3 个 标记 来 创建 ， 分 别 是 表格 标记 table、 行 标记 tr 和 单元 格 标 记 td。 表 格 的 各 种 属性 都 要 在 表格 的 开始 标记 <table> 和 表格 的 结束 标记 </table> 之 间 才 有 
%. 
41: 表格 中 的 水 平 间隔 。 
- Я]: 表格 中 的 重 直 间隔 。 
.单元 格 : 表格 中 行 与 列 相 交 所 产生 的 区 域 。 


基本 语法 : 


table> 


tr> 
td> 单 元 格 内 的 文字 </td> 
td> 单 元 格 内 的 文字 </td> 
/tr> 

tr> 

td> 单 元 格 内 的 文字 </td> 
td> 单 元 格 内 的 文字 </tq> 
</tr> 

</table> 


AAAAAAAA 


语法 说 明 : 


<table> 标 记 和 </table> 标 记分 别 表 示 表 格 的 开始 和 结束 ， 而 <tr> 和 </tr> 则 分 别 表示 行 的 开始 和 结束 ， 在 表格 中 包含 几 组 <tr>.….</tr> 就 表示 该 表格 为 几 行 ，<td> 和 </td> 表 示 单 元 格 的 起 始 和 结 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 表 格 标签 </title> 


</head> 

<body> 

<table width="600" height="319" рогдег-"1"> 
<tr> 

<td> 第 1 行 第 1 列 单元 格 </td><td> 第 1 行 第 2 列 单元 格 </td> 
</tr> 


<tr> 
<tdq> 第 2 行 第 1 列 单元 格 </td><tq> 第 2 行 第 2 列 单元 格 </tqd> 


在 代码 中 加 粗 部 分 的 代码 标记 是 表格 的 基本 构成 ， 在 浏览 器 中 预览 可 以 看 到 在 网 页 中 添加 了 一 个 2 行 2 列 的 表格 ， 表 格 没有 边框 ， 如 图 15-7 所 示 。 


囊 1 行 第 1 列 单 元 格 
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图 15-7 表格 的 基本 构成 效果 


15.24 ЖЮН ФУ 


链接 标记 <a> 在 HTML 中 有 既 可 以 作为 一 个 跳 转 其 他 页 面 的 链接 ， 也 可 以 作为 “埋设 ”在 文档 中 某 处 的 一 个 “ 锚 定 位 ”，<a> 也 是 一 个 行内 元 素 ， 它 可 以 成 对 出 现在 一 段 文档 的 任何 位 置 。 


基本 语法 : 


<a _ href=" 链 接 目标 "> 链接 显示 文本 </a> 


语法 说 明 : 
在 该 语法 中 ，<a> 标 记 的 属性 值 如 表 15-1 所 示 。 


表 15-1 <a> 标 记 的 属性 值 


实例 代码 : 


= |+ 
ref 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 超 链接 标签 </title> 


</head> 

<body> 

<p><a href="1"> 生 活 的 理想 ， 就 是 为 了 理想 的 生活 。</a></p> 

<p><a href="2"> 理 想 的 人 物 不 仅 要 在 物质 需要 的 满足 上 </a></p> 

<p><a href="3"> 生 命 的 全 部 的 意义 在 于 无 穷 地 探索 尚未 知道 的 东西 。</a></P> 
<p><a href="4"> RE RHEE, АИ. </а></р> 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 代码 标记 为 设置 文档 中 的 超 链 接 ， 在 浏览 器 中 预览 可 以 看 到 链接 效果 ， 如 图 15-8 所 示 。 
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15.2.5 Б 


HTML 标 签 中 最 常用 最 简单 的 标签 是 段落 标签 ， 也 就 是 <p> </p>, 说 它 常用 ， 是 因为 几乎 所 有 的 文档 文件 都 会 用 到 这 个 标签 ,说 它 简 单 从 外 形 上 就 可 以 看 出 来 ， 它 只 有 一 个 字母 。 虽 说 是 简单 ， 但 是 却 
也 非常 重要 ， 因 为 这 是 一 个 用 来 区 别 段落 用 的 。 


基本 语法 : 


<p> 段 落 文字 <p> 


语法 说 明 : 
段落 标记 可 以 没有 结束 标记 </p>， 而 每 一 个 新 的 段落 标记 开始 的 同时 也 意味 着 上 一 个 段落 的 结束 。 


实例 代码 : 


<!doctype html> 
<html> 

<head> 
<meta charset="utf-8"> 
<title> 段 落 标 签 </title> 


</head> 

<body> 

о 如 果 你 真爱 自己 ， 就 毫 无 理由 向 那些 无 力 帮 助 你 的 人 发 出 抱怨 。 如 果 你 在 自己 《或 别人 的 ) 身上 发 现 你 所 不 喜欢 的 东西 ， 你 可 以 积极 地 采取 必要 措施 来 改正 。</p> 
</роду> 

</html> 


在 代码 中 加 粗 部 分 的 代码 标记 <p> 为 段落 标记 ，<p> 和 </p> 之 间 的 文本 是 一 个 段落 ， 效 果 如 图 15-9 所 示 。 
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图 15-9 段落 效果 


15.2.6 ”表单 与 按钮 标签 


а 
7 


在 网 页 中 <form> </form> 标 记 对 用 来 创建 一 个 表单 ， 即 定义 表单 的 开始 和 结束 位 置 ， 在 标记 对 之 间 的 一 切 都 属于 表单 的 内 容 。 在 表单 的 <form> 标 记 中 ， 可 以 设置 表单 的 基本 属性 ， 包 括 表单 的 名 


、 处 理 程序 和 传送 方法 等 。 一 般 情 况 下 ， 表 单 的 处 理 程 序 action 和 传送 方法 method 是 必 不 可 少 的 参数 。 


action 用 于 指定 表单 数据 提交 到 哪个 地 址 进行 处 理 。 


基本 语法 : 


<form action=" 表 单 的 处 理 程序 "> 


</form> 


语法 说 明 : 


表单 的 处 理 程序 是 表单 要 提交 的 地 址 ， 也 就 是 表单 中 收集 到 的 资料 将 要 传递 的 程序 地 址 。 这 一 地 址 可 以 是 绝对 地 址 ， 也 可 以 是 相对 地 址 ， 还 可 以 是 一 些 其 他 形式 的 地 址 。 


表单 中 的 按钮 起 着 至 关 重 要 的 作用 ， 它 可 以 激发 提交 表单 的 动作 ， 也 可 以 在 用 户 需 要 修改 表单 的 时 候 ， 将 表单 恢复 到 初始 的 状态 ， 还 可 以 依照 程序 的 需要 ， 发 挥 其 他 的 作用 。 普 通 按钮 主要 是 配合 


JavaScript 脚 本 来 进行 表单 处 理 的 。 


提交 按钮 是 一 种 特殊 的 按钮 ， 单 击 该 类 按钮 可 以 实现 表单 内 容 的 提交 。 


基本 语法 : 


<input type="submit" name=" 按 钮 的 名 称 " value=" 按 钮 的 取 值 " /> 

语法 说 明 : 

在 该 语法 中 ，value 同 样 用 来 设置 显示 在 按钮 上 的 文字 。type="submit" 表 示 提 交 按 钮 。 
重 置 按钮 可 以 清除 用 户 在 页 面 中 输入 的 信息 ， 将 其 恢复 成 默认 的 表单 内 容 。 


基本 语法 : 


<input type="reset" name=" 按 钮 的 名 称 " value=" 按 钮 的 取 值 " /> 


语法 说 明 : 


在 该 语法 中 ，value 同 样 用 来 设置 显示 在 按钮 上 的 文字 。type="reset" 表 示 重 置 按钮 。 


实例 代码 : 


<!doctype html> 
<html> 


<meta charset="utf-8"> 


<title> 表 单 与 按钮 标签 </title> 
</head> 
<body> 
<form id="forml" name="form1" method="post" action="mailto:jiuQ@Q.com'> 

<p> 

<label for="textfield">#E4 :</label> 
<input type="text" name="textfield" id="textfield"> 
</p> 
<p> 


<label for="email"> 邮 件 :</label> 
<input type="email" папе="ета11" id="email"> 
</p> 


<label for="textarea"> 留 言 :</label> 

<textarea name="textarea" id="textarea"></textarea> 
</p> 
<p>&nbsp;</p> 


<input type="submit" name="submit" id="submit" value=" Е "> 
<input type="reset" name="reset" id="reset" value=" #4 "> 


</form> 
</body> 
</html> 


在 代码 中 加 粗 的 <input type= "reset"name= "reset"value= " 重 置 "> 标记 将 按钮 的 类 型 设置 为 reset， 取 值 设 置 为 “ 重 置 ”， 在 代码 中 加 粗 部 分 的 标记 action 是 程序 提交 标记 ， 这 里 将 表单 提交 到 电子 邮 
件 。 在 浏览 器 中 浏览 效果 如 图 15-10 所 示 。 
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1527 图 片 标 签 


有 了 图 像 文件 后 ， 就 可 以 使 用 mg 标记 将 图 像 插入 到 网 页 中 ， 从 而 达到 美化 网 页 的 效果 。img 元 素 的 相 天 属性 见 表 15-2 所 示 。 


Ж15-2 img 元素 的 相关 属性 


alt 


width, height же ЖИ J 


W IRA HEE |] Н 


基本 语法 : 


<img src=" 图 像 文 件 的 地 址 "> 


语法 说 明 : 


在 语法 中 ，src 人 参数 用 来 设置 图 像 文件 所 在 的 路 径 ， 这 一 路 径 可 以 是 相对 路 径 ， 也 可 以 是 绝对 路 径 。 


基本 语法 : 


switch (n) 

( 

сазе 1: 
执行 代码 块 1 
preak 

case 2: 
执行 代码 块 2 
preak 

default: 
如 果 n 即 不 是 1 也 不 是 2， 则 执行 此 代码 

} 


语法 解释 : 
switch 后 面 的 (n) 可 以 是 表达 式 ， 也 可 以 (并 通常 ) 是 变量 。 然 后 表达 式 中 的 值 会 与 case 中 的 数字 作 比 较 ， 如 果 与 某 个 case 相 匹配 ， 那 么 其 后 的 代码 就 会 被 执行 。 
switch 语 句 通 常 使 用 在 有 多 种 出 口 选择 的 分 支 结 构 上 ， 例 如 信号 处 理 中 心 可 以 对 多 个 信和 号 进行 响应 。 针 对 不 同 的 信号 均 有 相应 的 处 理 ， 下 面 举例 帮助 理解 。 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8" 
т ИИ 
</head> 

<body> 

<script type="text/javascript"> 
var d = new Date () 
theDay=d.getDay () 

switch (theDay) 

( 
сазе 5: 
document.write ("<b> 今 天 是 星期 五 ! </b>") 
break 
case 6: 
document.write ("<b> 今 天 是 星期 六 ! </b>") 
break 
case 0: 
document .write("<b> 明 天 又 上 班 了 。</b>") 
break 
default: 
document.write ("<b> 一 天 一 天 过 的 真 快 ! </b>") 
} 


</script> 
</body> 
</html> 


本 实例 使 用 了 switch 条 件 语 句 ， 根 据 星 期 天 数 的 不 同 ， 显 示 不 同 的 输出 文字 。 运 行 代码 效果 如 图 15-11 所 示 。 


p ~ G езжазе 
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一 天 一 天 过 的 真 快 ! 


15-11 switch 多 条 件 选 择 语句 


15.28 ”换行 标签 


在 HTML 文 本 显示 中 ， 默 认 是 将 一 行文 字 连 续 地 显示 出 来 ， 如 果 想 将 一 个 句子 后 面 的 内 容 在 下 一 行 显示 就 会 用 到 换行 符 <br> 。 换 行 符 号 标签 是 个 单 标签 ， 也 叫 空 标签 ， 不 包含 任何 内 容 ， 在 HTML 文 件 
中 的 任何 位 置 只 要 使 用 了 < br> 标 签 ， 当 文件 显示 在 浏览 器 中 时 ， 该 标签 之 后 的 内 容 将 在 下 一 行 显示 。 
基本 语法 : 


<рг> 


语法 说 明 : 
一 个 <br> 标 记 代 表 一 个 换行 ， 连 续 的 多 个 标记 可 以 实现 多 次 换行 。 


实例 代码 : 


<!doctype html> 
<html> 


<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 


</head> 

<body> 

р ДИ ي‎ T JMET ERT RARR, ` rasa ju ја BUH, Пат Е за Зее Ка КК. <or> ЕВЕ АЛЕ а, KAET, Я ЕЛАК ле ӨЛЕР J 
</body> 

</html> 


在 代码 中 加 粗 部 分 的 代码 标记 < br> 为 设置 换行 标记 ， 在 浏览 器 中 预览 ， 可 以 看 到 换行 的 效果 ， 如 图 15-12 所 示 。 
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的 力量 。 一 个 在 信念 力量 驱动 下 的 生命 即 是 可 创造 人 间 的 奇迹 。 


图 15-12 ”换行 效果 


提示 “<bt> 是 惟一 可 以 为 文字 分 行 的 方法 。 其 他 标记 如 <b> ， 可 以 为 文字 分 段 。 


15.29 水平线 标 签 


水 平 线 标签 ， 用 于 在 页 面 中 插入 一 条 水 平 标尺 线 ， 使 页 面 看 起 来 整齐 明了 。 
基本 语法 : 


<һү> 


语法 说 明 : 
在 网 页 中 输入 一 个 <hr> 标 记 ， 就 添加 了 一 条 默认 样式 的 水 平 线 。 
实例 代码 : 


<! дос = html> 


et F-8"> 
ss mai s 
</head> 


<body> 

如 果 你 能 够 放 得 下 过 去 ， 过 去 也 一 定 能 放下 你 。<br> 
<hr> 

别 因为 别人 说 的 话 而 放弃 ， 把 那些 话 当做 加 倍 努 力 的 动力 。 
</body> 


</html> 


在 代码 中 加 粗 部 分 的 标记 为 水 平 线 标记 ， 在 浏览 器 中 预览 ， 可 以 看 到 插入 的 水 平 线 效 果 ， 如 图 15-13 所 示 。 
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15-13 ”插入 水 平 线 效 果 


15.2.10 ”特殊 标签 


除了 空格 以 外 ， 在 网 页 的 制作 过 程 中 ， 还 有 一 些 特殊 的 符号 也 需要 使 用 代码 进行 代替 。 一 般 情况 下 ， 特 殊 符 号 的 代码 由 前 级 “&”、 字 符 名 称 和 后 级 “; ”组 成 。 使 用 特殊 符号 可 以 将 键盘 上 没有 的 字 
符 输出 来 。 


基本 语法 


&ашр;.....&сору; 


语法 说 明 : 
在 需要 添加 特殊 符号 的 地 方 添加 相应 的 符号 代码 即 可 ， 常 用 符号 及 其 对 应 代码 如 表 15-3 所 示 。 


Ж15-3 ”特殊 符合 


侍 号 的 代码 


95165: HTML5 基 础 


HTML5 是 一 种 网 络 标 准 ， 相 比 现 有 的 HTML4.01 和 XHTML 1.0， 可 以 实现 更 强 的 页 面 表现 性 能 ， 同 时 充分 调用 本 地 的 资源 ， 实 现 不 输 于 app 的 功能 效果 。HTML5 带 给 了 浏览 者 更 好 的 视 沉 冲击， 同时 让 
网 站 程序 员 更 好 地 与 HTML 语 言 “沟通 ”。 虽 然 现 在 HTML5 还 没有 完善 ， 但 是 对 于 以 后 的 网 站 建设 拥有 更 好 的 发 展 。 
重点 内 容 
- 认识 HTML5 
- HTML5 与 HTMIA4 的 区 别 
- HTML5 新 增 的 元 素 和 废除 的 元 素 
` 新 增 的 主体 结构 元 素 


. 新 增 的 非 主体 结构 元 素 


16.1 认识 HTML5 


HTML 最 早 是 作为 显示 文档 的 手段 出 现 的 ， 再 加 上 Javascript， 它 其 实 已 经 演变 成 了 一 个 系统 ， 可 以 开发 搜索 引擎 、 在 线 地 图 、 邮 件 阅 读 器 等 各 种 Web 应 用 。 虽 然 设 计 巧妙 的 Web 应 用 可 以 实现 很 多 令 
人 赞叹 的 功能 ， 但 开发 这 样 的 应 用 远 非 易 事 ， 多 数 都 得 手动 编写 大 量 JavaScript 代 码 ， 还 要 用 到 JavaScript 工 具 包 ， 乃 至 在 Web 服 务 器 上 运行 的 服务 器 端 Web 应 用 。 要 让 所 有 这 些 方面 在 不 同 的 浏览 器 中 都 
能 紧密 配合 不 出 差错 是 一 个 挑战 。 由 于 各 大 浏览 器 厂商 的 内 核 标准 不 一 样 ， 使 得 Web 前 端 开 发 者 通常 在 兼容 性 问题 而 引起 的 bug 上 要 浪费 很 多 的 精力 。 


HTML5 是 2016 年 正式 推出 来 的 ， 随 后 就 引起 了 世界 上 各 大 浏览 器 开发 商 (如 Fire Fox. chrome. IE9%) 的 极 大 热情 。 那 HTML5 为 什么 会 如 此 受 欢 迎 呢 ? 


在 新 的 HTML5 语 法 规则 当中 ， 部 分 的 JavaScript 代 码 将 被 HTML5 的 新 属性 所 替代 ， 部 分 DIV 的 布局 代码 也 将 被 HTML5 变 为 更 加 语义 化 的 结构 标签 ， 这 使 得 网 站 前 端的 代码 变 得 更 加 的 精炼 、 简 洁 和 清 
晰 ， 让 代码 的 开发 者 也 更 加 能 一 目 了 然 代码 所 要 表达 的 意思 。 

HTML5 是 一 种 用 设计 来 组 织 Web 内 容 的 语言 ， 其 目的 是 通过 创建 一 种 标准 的 和 直观 的 标记 语言 来 把 Web 设 计 和 开发 变 得 容易 起 来 。HTML5 提 供 了 各 种 切割 和 划分 页 面 的 手段 ， 允 许 你 创建 的 切割 组 件 
不 仅 能 用 来 逻辑 地 组 织 站 点 ， 而 且 能 够 赋予 网 站 聚合 的 能 力 。 这 是 HTML5 富 于 表现 力 的 语义 和 实用 性 美学 的 基础 ，HTML5 赋 予 设计 者 和 开发 者 各 种 层面 的 能 力 来 向 外 发 布 各 式 各 样 的 内 容 ， 从 简单 的 文本 
内 容 到 丰富 的 、 交 互 式 的 多 媒体 无 不 包括 在 内 。 如 图 16-1 所 示 HTML5 技 术 用 来 实现 动画 特效 。 
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图 16-1 HTML5 技 术 用 来 实现 动画 特效 


HTML5 提 供 了 高 效 的 数据 管理 、 绘 制 、 视 频 和 音频 工具 ， 其 促进 了 Web 上 的 和 便携 式 设备 的 跨 浏览 器 应 用 的 开发 。HTML5 人 允许 更 大 的 灵活 性 ,支持 开 发 非常 精彩 的 交互 式 网 站 。 其 还 引入 了 新 的 标签 
和 增强 性 的 功能 ， 其 中 包括 了 一 个 优雅 的 结构 、 表 单 的 控制 、API、 多 媒体 、 数 据 库 支 持 和 显著 提升 的 处 理 速 度 等 。 如 图 16-2 所 示 HTML5 制 作 的 抽奖 游戏 。 


16-2 HTML5 制 作 的 抽奖 游戏 


162 HTML5 与 HTML4 的 区 别 


HTML5 是 最 新 的 HTML 标 准 ，HTML5 语 言 更 加 精简 ， 解 析 的 规则 更 加 详细 。 在 不 同 的 浏览 器 ， 即 使 语法 错误 也 可 以 显示 出 同样 的 效果 。 下 面 列 出 的 就 是 一 些 HTML4 和 HTML5 之 间 主 要 的 不 同 之 处 。 


16.2.1 HTML5 的 语法 变化 


HTML 的 语法 是 在 SGML 语 言 的 基础 上 建立 起 来 的 。 但 是 SGML 语 法 非常 复杂 ， 要 开发 能 够 解析 SGML 语 法 的 程序 也 很 不 容易 ， 所 以 很 多 浏览 器 都 不 包含 SGML 的 分 析 器 。 因 此 ， 哩 然 HTML 基 本 遵从 
SGML 的 语法 ， 但 是 对 于 HTML 的 执行 在 各 浏览 器 之 间 并 没有 一 个 统一 的 标准 。 


在 这 种 情况 下 ， 各 浏览 器 之 间 的 兼容 性 和 互 操作 性 在 很 大 程度 上 取决 于 网 站 或 网 络 应 用 程序 的 开发 者 们 在 开发 上 所 做 的 共同 努力 ， 而 浏览 器 本 身 始终 是 存在 缺陷 的 。 


在 HTML5 中 提高 Web 浏 览 器 之 间 的 兼容 性 是 它 的 一 个 很 大 的 目标 ， 为 了 确保 兼容 性 ， 就 要 有 一 个 统一 的 标准 。 因 此 ， 在 HTML5 中 ， 围 绕 着 这 个 Web 标 准 ， 重 新 定义 了 一 套 在 现 有 的 HTML 的 基础 上 修 
改 而 来 的 语法 ， 使 它 运 行 在 各 浏览 器 时 各 浏览 器 都 能 够 符合 这 个 通用 标准 。 

因为 关于 HTML5 语 法 解析 的 算法 也 都 提供 了 详细 的 记载 ， 所 以 各 Web 浏 览 器 的 供应 商 们 可 以 把 HTML5 分 析 器 集中 封装 在 自己 的 浏览 器 中 。 最 新 的 Firefox (默认 为 4.0 以 后 的 版 本 ) 与 WebKit 浏 览 器 引 
擎 中 都 迅速 地 封装 了 供 HTML5 使 用 的 分 析 器 。 


16.2.2 HTML 5 中 的 标记 方法 


下 面 我 们 来 看 看 在 HTML5 中 的 标记 方法 。 
1. 内 容 类 型 (СопїепіТуре) 

HTML5 的 文件 扩展 符 与 内 容 类 型 保持 不 变 。 也 就 是 说 ， 扩 展 符 仍然 为 “.HTML” 或 “.htm”， 内 容 类 型 (ContentType) 仍然 为 “text/HTML” 。 
2.DOCTYPE 声 明 

DOCTYPE 声 明 是 HTML 文 件 中 必 不 可 少 的 ， 它 位 于 文件 第 一 行 。 在 HTML4 中 ， 它 的 声明 方法 如 下 : 

<!doctype html> 


DOCTYPE 声 明 是 HTML5 里 众多 新 特征 之 一 。 现 在 你 只 需要 写 <! DOCTYPE HTML> ， 这 就 行 了 ，HTML5 中 的 DOCTYPE 声 明 方 法 不 区 分 大 小 写 。 


3. 指 定 字符 编码 


在 HTML 中 ， 可 以 使 用 对 元 素 直接 追加 charset 属 性 的 方式 来 指定 字符 编码 ， 如 下 所 示 : 


<meta charset="utf-8"> 


16.2.3 HTML 5 语法 中 的 3 个 要 点 
HTML5 中 规定 的 语法 ， 在 设计 上 兼顾 了 与 现 有 HTML 之 间 最 大 程度 的 兼容 性 。 下 面 就 来 看 看 具体 的 HTML5 语 法 。 


1. 可 以 省 略 标签 的 元 素 
在 HTML5 中 ， 有 些 元 素 可 以 省 略 标 签 ， 具体 来 讲 有 3 种 情况 : 
@ 必 须 写 明 结束 标签 
area. base. br. col. command. embed. hr. img. input. keygen. link. meta. param. source. track. wbr, 
@ 可 以 省 略 结束 标签 
| dt. dd. р, rt. гр, optgroup, option. colgroup. thead, tbody, tfoot, tr. td. th, 
@@ 可 以 省 略 整个 标签 
HTML、head、body、colgroup、tbody。 
需要 注意 的 是 ， 虽 然 这 些 元 素 可 以 省 略 ， 但 实际 上 却 是 隐形 存在 的 。 


例如 : “<body>” 标 签 可 以 省 略 ， 但 在 DOM 树 上 它 是 存在 的 ， 可 以 永恒 访问 到 “document.body”。 


2. 取 得 boolean 值 的 属性 
取得 布尔 值 (Boolean) 的 属性 ， 例 如 disabled 和 readonly 等 ， 通 过 默认 属性 的 值 来 表达 “ 值 为 true”。 


此 外 ， 在 写 明 属 性 值 来 表达 “ 值 为 true” 时 ， 可 以 将 属性 值 设 为 属性 名 称 本 身 ， 也 可 以 将 值 设 为 空 字符 串 。 


<!-- 以 下 的 checked 属 性 值 皆 为 true--> 


<input type="checkbox" сһескеа> 
<input type="checkbox" checked="checked"> 
<input type="checkbox" checked=""> 


3. 省 略 属性 的 引用 符 


在 HTML4 中 设置 属性 值 时 ， 可 以 使 用 双 引 号 或 单 引号 来 引用 。 


在 HTML5 中 ， 只 要 属性 值 不 包含 空格 、“<”“>”“”“"“" ns "=" 等 字符 ， 都 可 以 省 略 属性 的 引用 符 。 


实例 如 下 : 


<input type="text"> 
<input type='text'> 
<input type=text> 


МИН 


16.2.4 НТМІ5БЕНТМІЛД Ка 


随 着 HTML5 的 到 来 ， 传 统 的 <div id= "header"> 和 <div id= "footer"> 无 处 不 在 的 代码 方法 现在 即将 变 成 自己 的 标签 ， 如 <Header> 和 <footer> 。 


如 图 16-3 所 示 为 传统 的 DIV+CSS 写 法 ， 如 图 16-4 所 示 为 HTML5 的 写法 。 


8163 ”传统 的 DIV+CSS 写 法 


从 图 16-3 和 图 16-4 可 以 看 出 HTML5 的 代码 可 读 性 更 高 了 ， 也 更 简洁 了 ， 内 容 的 组 织 相 同 ， 但 每 个 元 素 有 一 个 明确 的 清晰 的 定义 ， 搜 索引 擎 也 可 以 更 容易 地 抓 取 网 页 上 的 内 容 。HTML5 标 准 对 于 SEO 有 
什么 优势 呢 ? 


1. 使 搜索 引擎 更 加 容易 抓 取 和 索引 


对 于 一 些 网 站 ， 特 别 是 那些 严重 依赖 于 Flash 的 网 站 ，HTML5 是 一 个 大 福音 。 如 果 整 个 网 站 都 是 Flash 的 ， 就 一 定 会 看 到 转换 成 HTML5 的 好 处 。 首 先 ， 搜 索引 警 将 能 够 抓 取 站 点 内 容 。 所 有 谍 入 到 动画 中 
的 内 容 将 全 部 可 以 被 搜索 引擎 读 取 。 


16-4 HIML5 的 写法 


2. 提 供 更 多 的 功能 


使 用 HTML5 的 另 一 个 好 处 就 是 它 可 以 增加 更 多 的 功能 。 对 于 HTML5 的 功能 性 问题 ， 我 们 可 以 从 全 球 几 个 主流 站 点 对 它 的 青睐 就 可 以 看 出 。 社 交 网 络 大 享 Facebook 已 经 推出 他 们 期 待 已 久 的 基于 
HTML5 的 ijPad 应 用 平台 ， 每 天 都 有 不 断 的 基于 HTML5 的 网 站 和 HTML5 特 性 的 网 站 被 推出 。 保 持 站 点 处 于 新 技术 的 前 沿 ， 也 可 以 很 好 地 提高 用 户 的 友好 体验 。 


3. 可 用 性 的 提高 


最 后 我 们 可 以 从 可 用 性 的 角度 上 看 ，HTML5 可 以 更 好 地 促进 用 户 在 网 站 间 的 互动 情况 。 多 媒体 网 站 可 以 获得 更 多 的 改进 ， 特 别 是 在 移动 平台 上 的 应 用 ， 使 用 HTML5 可 以 提供 更 多 高 质量 的 视频 和 音频 


ЕЙ 
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本 节 将 详细 介绍 HTML5 中 新 增 和 废除 了 哪些 元 素 。 


16.3.1 ”新 增 的 结构 元 素 

HTML4 由 于 缺少 结构 ， 即 使 是 形式 良好 的 HTML 页 面 也 比较 难以 处 理 。 必 须 分 析 标题 的 级 别 ， 才 能 看 出 各 个 部 分 的 划分 方式 。 边 栏 、 页 脚 、 页 局 、 导 航 条 、 主 内 容 区 和 各 篇 文章 都 由 通用 的 DIV 元 素来 
表示 。HTML5 添 加 了 一 些 新 元 素 ， 专 门 用 来 标识 这 些 常见 的 结构 ， 不 再 需要 为 DIV 的 命名 费 尽心 思 ， 对 于 手机 、 阅 读 器 等 设备 更 有 语义 的 好 处 。 

HTML5 增 加 了 新 的 结构 元 素来 表达 这 些 最 常用 的 结构 : 

© section: 可 以 表达 书本 的 一 部 分 或 一 章 ， 或 者 一 章 内 的 一 节 。 

` header: 页 面 主体 上 的 头 部 ， 并 非 head 元 素 。 

` footer: 页 面 的 底部 (页 脚 ) ， 可 以 是 一 封 邮件 签名 的 所 在 。 

- nav: 到 其 他 页 面 的 链接 集合 。 


article: blogs 杂志 文章 汇编 等 中 的 一 篇 文章 。 


1.section 元 素 
section 元 素 表 示 页 面 中 的 一 个 内 容 区 块 ， 比 如 章节 、 页 眉 、 页 脚 或 页 面 中 的 其 他 部 分 。 它 可 以 与 1、h2、h3、h4、h5、h6 等 元 素 结合 起 来 使 用 ， 标 示 文 档 结 构 。 


HTML 5 中 代码 示例 : 


<section>http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/16550/OEBPS/Text/...</section> 


2.header 元 素 


header 元 素 表示 页 面 中 一 个 内 容 区 块 或 整个 页 面 的 标题 。 


HTML5 中 代码 示例 : 


<header>http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/16550/OEBPS/Text/...</header> 


3.footer 元 素 


footer 元 素 表 示 整 个 页 面 或 页 面 中 一 个 内 容 区 块 的 脚注 。 一 般 来 说 ， 它 会 包含 创作 者 的 姓名 、 创 作 日 期 以 及 创作 者 联系 信息 。 


HTML5 中 代码 示例 : 


人 


Footer></footer> 


4.nav 元 素 
nav 元 素 表示 页 面 中 导航 链接 的 部 分 。 


HTML5 中 代码 示例 : 


<пау></пау> 


5.article 元 素 


article 元 素 表示 页 面 中 的 一 块 与 上 下 文 不 相关 的 独立 内 容 ， 如 博客 中 的 一 篇 文章 或 报纸 中 的 一 篇 文章 。 


HTML5 中 代码 示例 : 


<article>http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/16550/OFBPS/Text/...</article> 


下 面 是 一 个 网 站 的 页 面 ， 用 HTML5 编 写 的 代码 如 下 所 示 。 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>HTML5 新 增 结构 元 素 </title> 

</head> 

<body> 

<header> 

<h1> 兰 山 科 技 公司 </h1> 

</header> 

<section> 

<article> 

<h2><a href=" " > 标题 1</a></h2> 

<p> 内 容 lhttp://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/16550/OEBPS/Text/...</p></article> 
<article> 
<h2><a href=" " > 标题 2</a></h2> 
<p> 内 容 2http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/16550/OEBPS/Text/...</p> 
</article> - 

</section> 

<footer> 


<li><a href=" " > 二 级 导航 1</a></1i> 

<li><a href=" " > 二 级 导航 2</a></1i> 

http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/16550/OEBPS/Text/...</ul> 
</nav> 

<р>© 2017 兰 山 科 技 公司 </p> 

</footer> 


运行 代码 ， 在 浏览 器 中 浏览 效果 如 图 16-5 所 示 。 这 些 新 元 素 的 引入 ， 将 不 再 使 得 布局 中 都 是 div， 而 是 通过 标签 元 素 就 可 以 识别 出 来 每 个 部 分 的 内 容 定 位 。 这 种 改变 对 于 搜索 引擎 而 言 ， 将 带 来 内 容 准 确 
ЕНК ЫЖ. 
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兰 山 科 技 公司 
标题 1 


内 容 1.. 


名 2017 三 山 笠 授 公 司 


% 100% = 
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16.3.2 ”新 增 块 级 元 素 


HTML5 还 增加 了 一 些 纯 语义 性 的 块 级 元 素 : aside. figure. figcaption. dialog, 
' aside: 定义 页 面 内 容 之 外 的 内 容 ， 比 如 侧 边栏 。 

' figure: 定义 媒介 内 容 的 分 组 ， 以 及 它们 的 标题 。 

.figcaption: 媒介 内 容 的 标题 说 明 。 

- dialog: 定义 对 话 (会 话 ) 。 


aside 可 以 用 以 表达 注 记 、 侧 栏 、 摘 要 、 插 入 的 引用 等 作为 补充 主体 的 内 容 。 如 下 这 样 表达 blog 的 侧 栏 。 在 浏览 器 中 浏览 如 图 16-6 所 示 。 


16-6 aside Ж 


实例 代码 : 


<aside> 

<h3> 最 新 新 闻 </h3> 

<ul> 

<li><a href="#" > 新 闻 标 题 </a></1i> 
</ul> 

</aside> 


dialog 元 素 用 于 表达 人 们 之 间 的 对 话 。 在 HTML5 中 ，dt 用 于 表示 说 话 者 ， 而 dd 则 用 来 表示 说 话 者 的 内 容 。 


实例 代码 : 


<aside> 

<h3> 最 新 新 闻 </h3> 

<ul> 

<li><a href="#" > 新 闻 标 题 </a></1i> 
</ul> 

</aside> 

л 于 表达 人 们 之 间 的 对 话 。 在 HTML5 中 ，dqt 用 于 表示 说 话 者 ， 而 qq 则 用 来 表示 说 话 者 的 内 容 。 
实例 代码 : 

<dialog> 

<dt>]: </dt> 

<dqq> 教 师资 格 考试 的 依据 是 什么 ? </dd> 
<qt> 回 答 : </dt> 


<qdg> 教 师资 格 考试 是 贯彻 落实 《国家 中 长 期 教育 改革 和 发 展 规划 纲要 (2010-2020 年 )》 的 重要 举措 ， 是 依据 《教育 部 关于 开展 中 小 学 和 幼儿 园 教师 资格 考试 改革 试点 的 指导 意见 》</dg> 


<dt>] 1: </dt> 

<dqq> 教 师资 格 考试 的 意义 是 什么 ? </dd> 

<dt>]: </dt> 

<dd> 教 师 是 实施 素质 教育 ， 提 高 教育 质量 的 关键 。 开 展 中 小 学 和 幼儿 园 教师 资格 考试 改革 试点 ， 完 善 并 严格 实施 教师 职业 准 入 


НЕ, </аа> 


</dialog> 


运行 代码 ， 在 浏览 器 中 浏览 如 图 16-7 所 示 。 
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教师 资格 考 斌 的 依据 是 什么 ? 


教师 资格 考试 是 贯彻 落实 《国家 中 长 期 教育 改革 和 发 展 规 划 岗 要 (2010-2020 年 》》 的 
a ЕЕ SRE ар T T Re ЕЛО РР ЛАВА РИ se Wisa НВ = = 


题 ， 
a 教师 资格 考试 的 晶 艾 是 什么 ? 


”教师 是 实施 素质 教育， 提高 教育 质量 的 天 键 。 开 展 中 小 学 和 幼儿 园 教 师资 格 考 试 改革 试 
岂 ， 完 善 开 严格 实 邢 教师 职业 准 入 制度 。 
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1633 ”新 增 的 行内 的 语义 元 素 


HTML5 增 加 了 一 些 行内 语义 元 素 : mark. time. meter. progress, 
так: 定义 有 记号 的 文本 。 

бте: 定义 日 期 /时 间 。 

- meter: 定义 预定 义 范围 内 的 度量 。 

` progress: 定义 运行 中 的 进度 。 

mark 元 素 用 来 标记 一 些 不 是 特别 需要 强调 的 文本 。 


<! и html> 
<h 
4. 

<meta charset="utf-8"> 
<title>mark 元 素 </title> 

вай 

<роду 

DSS апам В < /mark>. </р> 
</body> 

</HTML> 


运行 代码 ， 在 浏览 器 中 浏览 如 图 16-8 所 示 ，<mark> 与 </mark> 标 签 之 间 的 文字 “星期 天 ”添加 了 记号 。 


time 元 素 用 于 定义 时 间或 日 期 。 该 元 素 可 以 代表 24 小 时 中 的 某 一 时 刻 ， 在 表示 时 刻 时 ， 人 允许 有 时 间 差 。 在 设置 时 间或 日 期 时 ， 只 需 将 该 元 素 的 属性 “datetime” 设 为 相应 的 时 间或 日 期 即 可 。 
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今天 是 星期 天 。 


图 16-8 mark £ 249] 


实例 代码 : 
<p id="pl"> 
<time datetime="2017-3-16"> 今 天 是 2017 年 3 月 16 日 </time> 
<p> 
<p id="p2"> 
<time datetime="2017-3-16T20:00"> 现 在 时 间 是 2017 年 3 月 16 日 晚上 8 点 </time> 
</p> 
<p id="p3"> 
<time datetime="2017-3-16" pubdate="true"> 本 消息 发 布 于 2017 年 3 月 16 日 </time> 
</p> 
</p> 


<p> 元 素 id 号 为 “p1” 中 的 <time> 元 素 表示 的 是 日 期 。 页 面 在 解析 时 ， 获 取 的 是 属性 “datetime” 中 的 值 ， 而 标记 之 间 的 内 容 只 是 用 于 显示 在 页 面 中 。 
<p> 元 素 id 号 为 “p2” 中 的 <time> 元 素 表示 的 是 日 期 和 和 时间， 它们 之 间 使 用 字母 “T” 进 行 分 隔 。 
<p> 元 素 id 号 为 “p3” 中 的 <time> 元 素 表示 的 是 上 发布 日 期 。 为 了 在 文档 中 将 这 两 个 日 期 进行 区 分 ， 在 最 后 一 个 <time> 元 素 中 增加 了 “pubdate” 属 性 ， 表 示 此 日 期 为 发 布 日 期 。 


运行 代码 ， 在 浏览 器 中 浏览 如 图 16-9 所 示 。 


文件 (F) НЕЕ) 
今天 是 2017 年 3 月 16 日 
见 在 时 间 是 2017 年 3 月 16 日 晚上 8 点 
АН Вр 201743: 16Н 


progress 是 HTML5 中 新 增 的 状 
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态 交 互 元 素 ， 用 来 表示 页 面 中 的 某 个 任务 完成 的 进度 (进程 ) 。 例 如 下 载 文件 时 ， 文 件 下 载 到 本 地 的 进度 值 ， 可 以 通 


整数 (如 1~ 160) ， 也 可 以 使 用 百分比 (如 16% ~ 160%) 。 


下 面 通过 一 个 实例 介绍 progress 元 素 在 文件 下 载 时 的 使 用 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 


<body><title>progress 元 素 在 下 载 中 的 使 用 </title> 


<style type="text/css"> 
body { font-size:13px} 

р {рааа1та:Орх; margin: 0px 
.inputbtn { 

border:solid 1px #ссс; 
background-color: #eee; 
ine- height: 18px; 
font-size:12px 

} 
</style> 

</head> 

<body> 

<р idq="pTip"> 开 始 下 载 </P> 


} 


<progress Value="0" шах-"160" id="proDownFile"></progress> 
<input type="button" value=" 下 载 " class="inputbtn" onClick="Btn Click();"> 
<script type="text/javascript"> 


var intValue = 0; 
var intTimer; 
var objPro = document .getE 


lement 


ВуІа ('proDownFile'); 


var objTip = document.getE 


lemen 


A (十 


ById('pTip'); // 定 时 事件 


function Interval handler () 
intValue++; 
objPro.value = intValue; 

if (intValue >= objPro.max) 


( 


( 


clearInterval (intTimer) ; 


objTip.innerHTML = "下 载 完成 !"y } 
е1зе T 
objTip.innerHTML = "正在 下 载 " + intValue + "%"; 


) 
р ”// 下 载 按钮 单 击 事件 


Function Btn Click () { 


intTimer = setInterval (I 


nterval handler, 160); 


) 

</script> 
</body> 
</html> 


过 该 


元 素 动态 展示 在 页 面 中 ， 展 示 的 方式 既 可 以 使 用 


为 了 使 progress 元 素 能 动态 展示 下 载 进度 ， 需 要 通过 JavaScript 代 码 编写 一 个 定时 事件 。 在 该 事件 中 ， 累 加 变量 值 ， 并 将 该 值 设置 为 progress 元 素 的 “value” 属 性 值 ;， 当 这 个 属性 值 大 于 或 等 于 
progress 元 素 的 “max” 属 性 值 时 ， 则 停止 累加 ， 并 显示 “下 载 完成 ! ”的 字样 ; 否则， 动态 显示 正在 累加 的 百分比 数 ， 如 图 16-10 所 示 。 
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正在 下 载 31% 
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图 16-10 progress L Ж Ж 
meter 元 素 用 于 表示 在 一 定数 量 范 围 中 的 值 ， 如 投票 中 ， 候 选 人 各 占 比例 情况 及 考试 分 数 等 。 下 面 通 过 一 个 实例 介绍 meter 元 素 在 展示 投票 结果 时 的 使 用 。 


实例 代码 : 


<!doctype html> 
<html> 

<head> 
<meta charset="utf-8"> 

<title>meter 元 素 </title> 

<style type="text/css"> 

body { font-size:13px } 

</style> 

</head> 

<body> 

<p>100 人 参与 投票 ， 结 果 如 下 : </p> 

<p> 王 兵 : 

<meter value="0.30" optimum="1" high="0.9" low="1" max="1" min="0"></meter> 
<span> 30% </span> 

</p> 

<p> 李 明 : 

<meter value="70" optimum="100" high="90" low="16" пах-"100" min="0"> 
</meter> 

<span> 70% </span> 

</p> 

</body> 

</HIML> 


候选 人 “ 李 明 ” 所 占 的 比例 是 百分制 中 的 70， 如 图 16-11 所 示 。 
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1634 ФИНАНС 


HTML5 新 增 了 很 多 多 媒体 和 交互 性 元 素 如 video、audio。 在 HTML4 当 中 如 果 要 嵌入 一 个 视频 或 是 音频 的 话 需要 引入 一 大 段 的 代码 ， 还 有 兼容 各 个 浏览 器 ， 而 HTML5 只 需要 通过 引入 一 个 标签 就 可 以 ， 
就 像 img 标 签 一 样 方便 。 
1.video 元 素 

video 元 素 定 义 视频 ， 如 电影 片段 或 其 他 视频 流 。 

HTML5 中 代码 示例 : 


<video src="movie.ogg" controls="controls">video 元 素 </video> 


HTML4 中 代码 示例 : 


<object type="video/ogg" data="movie.ogv"> 
<param name="src" value="movie.ogv"> 
</object> 


2.audio 元 素 
audio 元 素 定 义 音频 ， 如 音乐 或 其 他 音频 流 。 
HTML5 中 代码 示例 : 


<audio src="someaudio.wav">audio 元 素 </audio> 


HTML4 中 代码 示例 : 


<object type="application/ogg" data="someaudio.wav"> 
<param пате="ѕгс" value="someaudio.wav"> 
</object> 


3.embed 元 素 
embed 元 素 用 来 插入 各 种 多 媒体 ， 格 式 可 以 是 Midi、Wav、AlFF、AU、MP3 等 。 


HTML5 中 代码 示例 : 


<embed src="horse.wav" /> 


HTML4 中 代码 示例 : 


<object data="flash.swf" type="application/x-shockwave-flash"></object> 


16.3.5 “新 增 的 input 元 素 的 类 型 


在 设计 网 站 页 面 的 时 候 ， 难 免 会 碰 到 表单 的 开 有 友 ， 用 户 输入 的 大 部 分 内 容 都 是 在 表单 中 完成 提交 到 后 台 的 。 在 HTML5 中 ， 也 提供 了 大 量 的 表单 功能 。 


在 HTML5 中 ， 对 input 元 素 进 行 了 大 幅度 的 改进 ， 使 得 我 们 可 以 简单 地 使 用 这 些 新 增 的 元 素来 实现 需要 Javascript 才 能 实现 的 功能 。 


1.url 类 型 


input 元 素 里 的 url 类 型 是 一 种 专门 用 来 输入 ur| 地 址 的 文本 框 。 如 果 该 文本 框 中 内 容 不 是 url 地 址 格式 的 文字 ， 则 不 允许 提交 。 例 如 : 


<form> 
<input name="urls" type="url" value="http://www.baidu.com "/> 
<input type="submit" value=" 提 交 "/> 
</form> 


设置 此 类 型 后 ， 从 外 观 上 来 看 与 普通 的 元 素 差不多 ， 可 是 如 果 你 将 此 类 型 放 到 表单 中 之 后 ， 当 单 击 “ 提 交 ” 按 钮 ， 如 果 此 输入 框 中 输入 的 不 是 一 个 URL 地 址 ， 将 无 法 提交 ， 如 图 16-12 所 示 。 
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16-12 ”utl 类 型 实例 


2.emalil 类 型 


如 果 将 上 面 的 URL 类 型 的 代码 中 的 type 修 改 为 email， 那 么 在 表单 提交 的 时 候 ， 会 自动 验证 此 输入 框 中 的 内 容 是 否 为 email 格 式 ， 如 果 不 是 ， 则 无 法 提交 。 代 码 如 下 : 


<input name="email" type="email" value="sdssh@163.com/"/> 
<input type="submit" value=" 提 交 "/> 


如 果 用 户 在 该 文本 框 中 输入 的 不 是 email 地 址 的 话 ， 则 会 提醒 不 允许 提交 ， 如 图 16-13 所 示 。 
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16-15 ”email 类 型 实例 


3.date 类 型 


input 元 素 里 的 date 类 型 在 开发 网 页 过 程 中 是 非常 多 见 的 。 例 如 我 们 经 常 看 到 的 购买 日 期 、 发 布 时 间 、 订 票 时 间 。 这 种 date 类 型 的 时 间 是 以 日 历 的 形式 来 方便 用 户 输入 的 。 


<form> 
<input id="lykongtiao date" 5 "іпуікопасіао.сот" type="date"/> 
<input type="submit" value=" 提 交 "/ 

</form> 


在 HTML4 中 ， 需 要 结合 使 用 JavaScript 才 能 实现 日 历 选 择 日 期 的 效果 ， 在 HTML5 中 ， 只 需要 设置 input 为 date 类 型 即 可 ， 提 交 表 单 的 时 候 也 不 需要 验证 数据 了 ， 如 图 16-14 所 示 。 
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® 16-14 date 类 型 实例 


4.time 类 型 


input 里 的 time 类 型 是 专门 用 来 输入 时 间 的 文本 杠 ， 并 且 会 在 提交 时 对 输入 时 间 的 有 效 性 进行 检查 。 它 的 外 观 可 能 会 根据 不 同类 型 的 浏览 器 而 出 现 不 同 表现 形式 


<form> 
<input id=" linyikongtiao time" name=" linyikongtiao.com" type="time"/> 
<input type="submit" value=" 提 交 "/> 

</form> 


time 类 型 是 用 来 输入 时 间 的 ， 在 提交 的 时 候 检查 是 否 输入 了 有 效 的 时 间 ， 如 图 16-15 所 示 。 


图 16-15 time 类 型 实例 


5.DateTime 类 型 


Datetime 类 型 是 一 种 专门 用 来 输入 本 地 日 期 和 时 间 的 文本 框 ， 同 样 ， 它 在 提交 的 时 候 也 会 对 数据 进行 检查 。 目 前 主流 浏览 器 都 不 支持 datetime 类 型 。 


<form> 
<input id=" linyikongtiao datetime" name=" linyikongtiao.com" type="datetime"/> 
<input type="submit" value=" 提 交 "/> 

</form> 


16.3.6 ”废除 的 元 素 


在 HTML5 中 废除 了 很 多 元 素 ， 具 体 如 下 。 


1. 能 使 用 CSS 蔡 代 的 元 素 


对 于 basefont、big、center、font、s、strike、tt、u 这 些 元 素 ， 由 于 它们 的 功能 都 是 纯粹 为 页 面 样式 服务 的 ， 而 HTML5 中 提倡 把 页 面 样式 性 功能 放 在 CSs 样 式 表 中 编辑 ， 所 以 将 这 些 元 素 废除 了 。 


2. 不 再 使 用 frame 框 架 


对 于 frameset 元 素 、frame 元 素 与 noframes 元 素 ， 由 于 frame 框 架 对 网 页 可 用 性 存在 负面 影响 ， 在 HTML5 中 已 不 支持 frame 框 架 ， 只 支持 iframe 框 架 ， 同 时 将 以 上 三 个 元 素 废除 。 


3. 只 有 部 分 浏览 器 支持 的 元 素 
对 于 applet、bgsound、blink、marquee 等 元 素 ， 由 于 只 有 部 分 浏览 器 支持 这 些 元 素 ， 特 别 是 bgsound 元 素 以 及 marquee 元 素 ， 只 被 Internet Explorer 所 支持 ， 所 以 在 HTML5 中 被 废除 。 其 中 applet 


元 素 可 由 embed 元 素 或 object 元 素 替 代 ，bgsound 元 素 可 由 audio 元 素 蔡 代 ，marquee 可 以 由 JavaScript 编 程 的 方式 所 替代 。 


4. 其 他 被 废除 的 元 素 

其 他 被 废除 元 素 还 有 : 

` 废除 actonym 元 素 ， 使 用 abbr 元 素 替代 。 

Жа, Жал ЖҚ 

废除 isindex 元 素 ， 使 用 fotm 元 素 与 input 元 素 相 结合 的 方式 替代 。 
` 废除 listing 元 素 ， 使 用 bre 元 素 替 代 。 

` 废除 xmp 元 素 ， 使 用 code 元 素 替 代 。 

` 废除 nextid 元 素 ， 使 用 GUIDS 替 代 。 


` 废除 plaintext 元 素 ， 使 用 “text/plian”MIME 类 型 蔡 代 。 


164 ”新 增 的 主体 结构 元 素 


在 HTML 5 中 ,为 了 使 文档 的 结构 更 加 清晰 明确 ， 容 易 阅读 ， 增 加 了 很 多 新 的 结构 元 素 ， 如 页 眉 、 页 脚 、 内 容 区 块 等 结构 元 素 。 


1641 article 元 素 


article 元 素 可 以 灵活 使 用 ，article 元 素 可 以 包含 独立 的 内 容 项 ， 所 以 可 以 包含 一 个 论坛 帖子 、 一 篇 杂志 文章 、 一 篇 博客 文章 、 用 户 评论 等 。 这 个 元 素 可 以 将 信息 各 部 分 进行 任意 分 组 ， 而 不 论 信息 原来 
的 性 质 。 

作为 文档 的 独立 部 分 ， 每 一 个 article 元 素 的 内 容 都 具有 独立 的 结构 。 为 了 定义 这 个 结构 ， 可 以 利用 前 面 介绍 的 <header> 和 <footer> 标 签 的 丰富 功能 。 它 们 不 仅仅 能 够 用 在 正文 中 ， 也 能 够 用 于 文档 的 
各 个 节 中 。 

下 面 以 一 篇 文章 讲述 article 元 素 的 使 用 ， 具 体 代 码 如 下 。 


<article> 
<header> 
<h1> 人 生 学 会 随缘 ， 才 能 活 得 自在 </h1> 
<p> 发 表 日 期 : <time pubdate="pubdate">2017/05/09</time></p> 
</header> 
<p> 在 这 个 世界 上 ， 凡 事 不 可 能 一 帆 风 顺 ， 事 事 如 意 ， 总 会 有 烦恼 和 忧愁 。 当 不 顺心 的 事 时 常 蒙 绕 着 我 们 的 时 候 ， 我 们 该 如 何 面 对 呢 ?3&19quo; 随 缘 自 适 ， 烦 恼 即 去 srdquo; 。 其 实 ， 随 缘 是 一 种 进取 ， 是 智者 的 行为 ， 愚 者 的 借 
<footer> 
<p><smal1l> 版 权 所 有 @ 桃 源 文学 。</small></p> 
</footer> 
</article> 


在 header 元 素 中 嵌入 了 文章 的 标题 部 分 ， 在 h1 元 素 中 是 文章 的 标题 “人 生 学 会 随缘 ， 才 能 活 得 自在 ”， 文 章 的 发 表 日 期 在 p 元 素 中 。 在 标题 下 部 的 p 元 素 中 是 文章 的 正文 ， 在 结尾 处 的 footer 元 素 中 是 
文章 的 版 权 。 对 这 部 分 内 容 使 用 了 article 元 素 。 在 浏览 器 中 效果 如 图 16-16 所 示 。 
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图 16-16 artile A% 


仆 ，article 元 素 也 可 以 用 来 表示 插件 ， 它 的 作用 是 使 插件 看 起 来 好 像 内 府 在 页 面 中 一 样 。 


<article> 


<h1l>article 表 示 插 件 </h1> 
<object> 


<param name= 'allowFullScreen" value="true 

<embed src="#" width="600" height="395' TY 
</object> 

</article> 


一 个 网 页 中 可 能 有 多 个 独立 的 article 元 素 ， 每 一 个 article 元 素 都 允许 有 自己 的 标题 与 脚注 等 从 属 元 素 ， 并 人 允许 对 自己 的 从 属 元 素 单独 使 用 样式 。 如 一 个 网 页 中 的 样式 可 能 如 下 所 示 : 


header { 
display:block; 
color:green; 


texi 
} 


ari 


t-align:center; 


tcle header{ 


color:red; 


texi 


} 


t-align:left; 


16.4.2 section Tt 


section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进行 分 块 。 一 个 section 元 素 通常 由 内 容 及 其 标题 组 成 。 但 section 元 素 也 并 非 一 个 普通 的 容器 元 素 ， 当 一 个 容器 需要 被 重新 定义 样式 或 者 定义 脚本 行 
为 的 时 候 ， 还 是 推荐 使 用 Div 控 制 。 


<section> 


<h1> 水 果 </h1> 


Book?pat 


<p> 水 果 是 指 多 汗 且 有 甜 味 的 植物 果实 ， 不 但 含有 丰富 的 营养 有 旦 能 够 帮助 消化 。 水 果 有 降 血 压 、 减 组 衰老、 减肥 瘦身 、 皮 肤 保 养 、 明 目 、 抗 癌 、 降 低 胆 固 醇 等 保健 作用 http://www.hzcourse.com/resource/readi 


</section> 


下 面 是 一 个 带 有 section 元 素 的 article 元 素 例 子 。 


<article> 


<h1> 北 京 </h1> 
<p> 故 宫 博 物 院 、 天 坛 公园 、 颐 和 园 、 八 达 岭 长 城 </p> 
<section> 
<h2> << /h2> 
<p> 天 津 古文 化 街 旅 游 区 〈 津 门 故 里 ) 、 天 津 盘 山 风景 名 胜 区 </p> 
</section> 
<section> 
<h2> 上 海 </h2> 
<p> 上 海 东 方 明珠 广播 电视 塔 、 上 海 野生 动物 园 </p> 


</section> 


</article> 


从 上 面 的 代码 可 以 看 出 ， 首 页 整体 呈现 的 是 一 段 完整 独立 的 内 容 ， 所 有 我 们 要 用 article 元 素 包 起 来 ， 这 其 中 又 可 分 为 三 段 ， 每 一 段 都 有 一 个 独立 的 标题 ， 


的 结构 显得 清晰 。 在 浏览 器 中 效果 如 图 16-17 所 示 。 


使 用 了 两 个 section 元 素 为 其 分 段 。 这 样 使 文档 
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天 津 古 文化 街 旅游 区 〔 津 门 故里 ) 、 天 津 盘山 风景 名 胜 区 
上 海 
上 海 东方 明珠 广播 电视 塔 、 上 海 野生 动物 园 


16-17 带 有 section 元 素 的 atticle 元 素 实 例 


article 元 素 和 section 元 素 有 什么 区 别 呢 ?在 HTML 5 中 ，article 元 素 可 以 看 成 是 一 种 特殊 种 类 的 section 元 素 ， 它 比 section 元 素 更 强调 独立 性 。 即 section 元 素 强 调 分 段 或 分 块 ， 而 article 强 调 独立 性 。 
如 果 一 块 内 容 相对 来 说 比较 独立 、 完 整 的 时 候 ， 应 该 使 用 article 元 素 ， 但 是 如 果 想 将 一 块 内容 分 成 几 段 的 时 候 ， 应 该 使 用 section 元 素 。 


提示 。 section 元 素 使 用 时 的 注意 事项 如 下 : 
(1) 不 要 将 section 元 素 用 作 设 置 样式 的 页 面容 器 ， 选 用 Div。 
(2) 如 果 atticle 元 素 、aside 元 素 或 nav 元 素 更 符合 使 用 条 件 ， 不 要 使 用 section 元 素 。 


(3) 不 要 为 没有 标题 的 内 容 区 块 使 用 section 元 素 。 


16.4.3 navt 


nav 元 素 在 HTML5 中 用 于 包 囊 一 个 导航 链接 组 ， 显 式 地 说 明 这 是 一 个 导航 组 ， 在 同一 个 页 面 中 可 以 同时 存在 多 个 nav。 
并 不 是 所 有 的 链接 组 都 要 被 放 进 nav 元 素 ， 只 需要 将 主要 的 、 基 本 的 链接 组 放 进 nav 元 素 即 可 。 例 如 ， 在 页 脚 中 通常 会 有 一 组 链接 ， 包 括 服务 条 款 、 首 页 、 版 权 声明 等 ， 这 时 使 用 footer 元 素 最 恰当 。 


一 直 以 来 ， 习 惯 于 使 用 形 如 <div id= "пам" > 或 <ul id= "пау" > 这样 的 代码 来 编写 页 面 的 导航 ， 在 HTML5 中 ， 可 以 直接 将 导航 链接 列表 放 到 < nav> 标 签 中 : 


<nav> 

<ul> 

<11><а href="index.html">Home</a></1i> 
<li><a href="#">About</a></li> 

<li><a href="#">Blog</a></1i> 

</ul> 

</nav> 


导航 ， 顾 名 思 义 ， 就 是 引导 的 路 线 ， 那 么 具有 引导 功能 的 都 可 以 认为 是 导航 。 导 航 可 以 是 页 与 页 之 间 导 航 ， 也 可 以 是 页 内 的 段 与 段 之 间 导 航 。 


<header> 
<h1 > 页 面 之 间 导 航 


<11><а href="index.html"> 首 页 </a></1i> 
<li><a href="about.html"> 关 于 我 们 </a></1i> 
<li><a href="bbs .html"> 新 闻 中 心 </a></1i> 


</nav> 
</Һ1></Һ1> 
</header> 


这 个 实例 是 页 面 之 间 的 导航 ，nav 元 素 中 包含 了 三 个 用 于 导航 的 超 链 接 ， 即 “首页 ” “关于 我 们 ”和 “新 闻 中 心 ”。 该 导航 可 用 于 全 局 导航 ， 也 可 放 在 某 个 段落 ， 作 为 区 域 导航 。 运 行 代码 如 图 16-18 所 
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图 16-18 页 面 之 间 导 航 


下 面 的 实例 是 页 内 导航 ， 运 行 代 码 如 图 16-19 所 示 。 


<!doctype html> 
<title> 段 内 导航 </title> 


<header> 
</header> 
<article> 
<h2> 文 章 的 标题 </h2> 
<nav> 
<ul> 
<li><a href="#p1"> 段 一 </a></1i> 
<li><a href="#p2"> 段 二 </a></1i> 
<li><a href="#p3"> 段 三 </a></1i> 
</ul> 
</nav> 
<p id=p1> 段 一 </p> 


<p igd=p2> 段 二 </p> 
<р id=p3> 段 三 </P> 
</article> 
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16.4.4 aside 元 素 


aside 元 素 用 来 表示 当前 页 面 或 文章 的 附属 信息 部 分 ， 它 可 以 包含 与 当前 页 面 或 主要 内 容 相关 的 引用 、 侧 边栏 、 广 告 、 导 航 条 ， 以 及 其 他 类 似 的 有 别 于 主要 内 容 的 部 分 。 
aside 元 素 主要 有 以 下 两 种 使 用 方法 。 


(1) 包含 在 article 元 素 中 作为 主要 内 容 的 附属 信息 部 分 ， 其 中 的 内 容 可 以 是 与 当前 文章 有 关 的 参考 资料 、 名 词 解释 等 。 


<article> 
<h1>..</h1> 
<р>..</р> 
<авіде>.</авіде> 
</article> 


(2) 在 article 元 素 之 外 使 用 作为 页 面 或 站 点 全 局 的 附属 信息 部 分 。 最 典型 的 是 侧 边 栏 ， 其 中 的 内 容 可 以 是 友情 链接 、 文 章 列 表 、 广 告 单元 等 。 代 码 如 下 所 示 ， 运 行 代码 效果 如 图 16-20 所 示 。 


<aside> 
<h2> 儿 童鞋 </h2> 
<ul> 

<11> Е</11> 
<1i> 男 童鞋 </1i> 
</ul> 
<n2> 清 仓 特 价 </h2> 
<ul> 
<1i> 春 秋季 </1i> 
<1i> 夏 季 </1i> 
<1i> 冬 季 </1i> 
</ul> 

</aside> 


IF ЕЕ) EEV) BESA ТЕТ) 帮助 (H) 
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16.5 ”新 增 的 非 主 体 结构 元 素 


除了 以 上 几 个 主要 的 结构 元 素 之 外 ，HTML5 内 还 增加 了 一 些 表示 逻辑 结构 或 附加 信息 的 非 主 体 结构 元 素 。 


16.5.1 header 元 素 


header 元 素 是 一 种 具有 3 引导 和 导航 作用 的 结构 元 素 ， 通 常用 来 放置 整个 页 面 或 页 面 内 的 一 个 内 容 区 块 的 标题 ，header 内 也 可 以 包含 其 他 内 容 ， 例 如 表格 、 表 单 或 相关 的 Logo 图 片 。 


在 架构 页 面 时 ， 整 个 页 面 的 标题 常 放 在 页 面 的 开头 ，header 标 签 一 般 都 放 在 页 面 的 顶部。 可 以 用 如 下 所 示 的 形式 书写 页 面 的 标题 : 


<header> 
<h1> 页 面 标题 </h1> 
</header> 


在 一 个 网 页 中 可 以 拥有 多 个 header 元 素 ， 可 以 为 每 个 内 容 区 块 加 一 个 header 元 素 。 


<header> 
<h1> 网 页 标题 </h1> 
</header> 
<article> 
<header> 
<h1> 文 章 标题 </h1> 
</header> 
<p> 文 章 正文 </p> 
</article> 


在 HTML5 中 ， 一 个 header 元 素 通常 包括 至 少 一 个 headering 元 素 (h1-h6) ， 也 可 以 包括 hgroup、nav 等 元 素 。 


下 面 是 一 个 网 页 中 的 header 元 素 使 用 实例 ， 运 行 代码 如 图 16-21 所 示 。 


<header> 
<hgroup> 
<h1> 小 学 语文 词语 宝典 </h1> 
<p>《 小 学 语文 词语 宝典 〈 人 教 版 适用 ) 》 针 对 小 学 生 对 语文 学 习 的 实际 需要 ， 依 据 人 教 版 小 学 语文 教材 ， 分 年 级 逐 册 设置 了 &Ldqcuo; 生 字 盘 点 &rdqquoy、&lLdquo; 词 语 理解 &rdqquo;、&Lddquo; 近 义 词 &rdqquoy、&lLdquo; 词 》 
</hgroup> 
<пау> 
<ul> 
<1i> 基 本 信息 </1i> 
<1i> 内 容 介 绍 </1i> 
<11>Ң ж</11> 
</ul> 
</nav> 
</header> 
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16.5.2 ”hgroup 元 素 


header 元 素 位 于 正文 开头 ， 可 以 在 这 些 元 素 中 添加 <h1> 标 签 ， 用 于 显示 标题 。 基 本 上 ，<h1> 标 签 已 经 足够 用 于 创建 文档 各 部 分 的 标题 行 。 但 是 ， 有 时 候 还 需要 添加 副标题 或 其 他 信息 ， 以 说 明 网 页 
或 各 节 的 内 容 。 
hgroup 元 素 是 将 标题 及 其 子 标题 进行 分 组 的 元 素 。hgroup 元 素 通 常会 将 h1 ~ h6 元 素 进行 分 组 ， 一 个 内 容 区 块 的 标题 及 其 子 标题 算 一 组 。 


通常 ， 如 果 文 章 只 有 一 个 主 标题 ， 是 不 需要 hgroup 元 素 的 。 但 是 ， 如 果 文 章 有 主 标题 ， 主 标题 下 有 子 标题 ， 就 需要 使 用 hgroup 元 素 了 。 如 下 所 示 hgroup 元 素 实例 代码 ， 运 行 代码 效果 如 图 16-22 所 


<article> 
<header> 
<hgroup> 
<h1> 父 爱 ， 永 恒 </h1> 
</hgroup> 


р> 
time datetime=" 2 05-20">2017 年 03 月 20 晶 </time></p> f 
<p> ЧЕН, 总 让 你 阵痛 一 生 ; 有 些 画 面 ， 总 让 你 影像 一 生 ; 有 些 记忆 ， 总 让 你 温暖 一 生 ， 有 些 离别 ， 总 让 你 寂静 一 生 。 其 实 ， 我 们 都 不 能 要 求 明 天 怎么 样 ， 但 明天 一 定 会 来 ， 这 或 许 就 是 人 生 。</p> 
</header> 
</article> 


如 果 有 标题 和 副标题 ， 或 在 同一 个 <header> 元 素 中 加 入 多 个 标题 ， 那 么 就 需要 使 用 <hgroup> 元 素 。 
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16.5.3 footer 元 素 


footer 通 常 包括 其 相关 区 块 的 脚注 信息 ， 如 作者 、 相 关 阅 读 链接 及 版 权 信息 等 。footer 元 素 和 header 元 素 使 用 基本 上 一 样 ， 可 以 在 一 个 页 面 中 使 用 多 次 ， 如 果 在 一 个 区 段 后 面 加 入 footer 元 素 ， 那 么 它 


就 相当 于 该 区 段 的 尾部 了 。 


HTML 5 出 现 之 前 ， 通 常 使 用 类 似 下 面 这 样 的 代码 来 写 页 面 的 页 脚 : 


<div id="footer"> 

<li> Н</11> 
<1i> 站 点 地 图 </1i> 
<1i> 联 系 方式 </1i> 


在 HTML5 中 ， 可 以 不 使 用 div， 而 用 更 加 语义 化 的 footer 来 写 : 


<footer> 
<ul> 
< 1 > Чая Н</11> 
1i> 站 点 地 图 </1i> 
<1i> 联 系 方式 </1i> 
</ul> 
</footer> 


A 


footer 元 素 既 可 以 用 作 页 面 整体 的 页 脚 ， 也 可 以 作为 一 个 内 容 区 块 的 结尾 ， 例 如 可 以 将 <footer> 直 接 写 在 <section> 或 是 <article> 中 。 


在 article 元 素 中 添加 footer 元 素 : 


<article> 
文章 内 容 
<footer> 
文章 的 脚注 
</footer> 
</article> 


在 section 元 素 中 添加 footer 元 素 : 


<section> 

分 段 内 容 

<footer> 
分 段 内 容 的 脚注 
/footer> 
</section> 


A 


16.5.4 ааагез5тс= 


address 元 素 通常 位 于 文档 的 末尾 ，address 元 素 用 来 在 文档 中 呈现 联系 信息 ， 包 括 文档 创建 者 的 名 字 、 站 点 链接 、 电 子 邮箱 、 真 实地 址 、 电 话 号 码 等 。address 不 只 是 用 来 呈现 电子 邮箱 或 真实 地 址 这 
样 的 “地 址 ”概念 ， 而 应 该 包括 与 文档 创建 人 相关 的 各 类 联系 方式 。 


下 面 是 address 元 素 实 例 。 


<!doctype html> 
<html> 

<head> 
<meta charset="utf-8"> 

<title>address 元 素 实例 </title> 

</head> 

<body> 

<address> 

<a href="mailto:example@example.com">webmaster</a><br /> 
济南 网 站 建设 公司 <br /> 

XXX 区 XXX 号 <br /> 

</address> 

</body> 

</html> 


浏览 器 中 显示 地 址 的 方式 与 其 周围 的 文档 不 同 ，IE、Firefox 和 Safari 浏 览 器 以 斜体 显示 地 址 ， 如 图 16-23 所 示 。 


е =N! BN\address 元 紊 .html - С | (28 address 元 素 实 例 
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第 17 章 ”设计 企业 宣传 型 网 站 


企业 在 互联 网 上 拥有 自己 的 网 站 将 是 必然 趋势 ， 网 上 形象 的 树立 将 成 为 企业 宣传 的 关键 。 网 站 是 企业 在 互联 网 上 的 标志 ， 并 且 可 以 通过 因特网 宣传 产品 和 服务 ， 以 及 与 用 户 及 其 他 企业 建立 实时 互动 的 


重点 内 容 
` 网 站 前 期 策划 
` 网 站 的 版 面 布局 及 色彩 
° 设计 网 站 首页 
` 创建 本 地 站 点 


` 二 级 模板 页 面 的 设计 


171 ”网 站 前 期 策划 


企业 网 站 是 以 企业 宣传 为 主题 而 构建 的 网 站 ， 域 名 后 缀 一 般 为 .com。 与 一 般 门户 型 网 站 不 同 ， 企 业 网 站 相对 来 说 信息 量 比较 少 。 该 类 型 网 站 页 面 结构 的 设计 主要 是 从 公司 简介 、 产 品 展示 、 服 务 等 几 个 


方面 来 进行 的 。 


17.1.1 “明确 企业 网 站 建站 目的 
进行 网 站 建设 的 第 一 步 并 不 是 如 何 开始 自己 的 网 站 建设 ， 而 是 要 知道 自己 为 什么 要 建站 ? 建站 想 实现 怎样 的 预期 目标 ? 当然， 了 解 企 业 自身 的 发 展 状 况 、 管 理 团队 、 营 销 渠道 、 产 品 优势 、 竞 争 对 手 都 
是 必 不 可 少 的 工作 。 


在 网 站 建设 中 应 该 避免 的 是 不 要 人 云 亦 云 ， 看 到 人 家 网 站 有 个 什么 功 
是 一 个 很 大 的 工程 ， 需 要 通过 自己 的 企业 资料 进行 各 方面 的 综合 分 析 ， 才 


就 要 在 自己 的 网 站 上 也 添加 。 这 样 一 来 ， 就 会 完全 忽略 了 自身 产品 、 企 业 、 销 售 渠道 、 服 务 等 各 方面 的 情况 。 企 业 网 站 建设 初期 


能 
能 真正 体现 企业 受众 的 需求 。 


网 站 的 功能 不 是 越 多 越 好 ， 这 样 极 容易 浪费 资源 。 因 此 ， 网 站 建设 时 不 要 贪图 网 站 页 面 的 华美 ， 在 网 站 上 加 入 很 多 图 片 或 者 Flash， 这 在 一 定 程度 上 也 影响 速度 访问 ， 从 而 流失 掉 一 部 分 访问 客户 。 在 注 


重 网 站 外 观 的 同时 ， 更 要 注重 网 站 的 内 在 功能 ， 让 客户 有 好 的 体验 度 的 网 站 才 是 成 功 的 。 


17.1.2 ”网 站 总 体 策划 


明确 建站 目的 后 ， 接 下 来 就 要 策划 网 站 。 对 一 个 成 功 的 网 站 而 言 ， 最 重要 的 是 前 期 策划 ， 而 不 是 技术 ， 策 划 者 要 做 的 因素 有 很 多 。 


(1) 网 站 侧重 点 在 哪里 。 自 身 的 优势 和 劣势 必须 提前 做 一 个 评估 ， 而 如 何 通 过 网 站 建设 放大 优势 、 补 充 务 势 ， 也 是 一 个 重要 考察 点 。 一 个 别 具 风 格 而 又 充分 考虑 到 用 户 体 验 和 客户 需求 的 网 站 才 是 更 多 
受众 所 需求 的 网 站 。 


(2) 市 场 调查 。 市 场 调查 包括 向 客户 和 合作 伙伴 了 解 客 户 最 需要 的 是 什么 ”什么 才 是 合作 伙伴 最 需要 的 ?这 样 网 站 最 终 呈 现 的 才 有 可 能 是 被 接受 并 且 喜 欢 的 网 站 ， 也 才能 充分 实现 网 站 所 追求 的 效益 转 
化 。 


(3) 收集 整理 质量 相对 比较 高 的 内 容 。 高 质量 的 网 站 内 容 是 吸引 受众 注意 并 且 引 起 关注 的 重要 因素 ， 所 以 一 定 要 尽 可 能 多 地 收集 和 整理 网 站 需要 的 内 容 和 素材 ， 而 不 是 要 等 网 站 上 线 了 才 去 慢 慢 地 整 
理 。 内 容 为 王 是 推广 中 的 一 个 重要 法 宝 ， 对 于 网 站 初期 的 基础 框架 的 搭建 ， 原 创 的 文章 也 是 非常 必要 的 。 


(4) 明确 自己 的 竞争 优势 。 网 上 、 网 下 竞争 对 手 是 谁 ” 网 上 竞争 对 手 可 以 通过 搜索 引擎 查找， 与 他 们 相 比 ， 公 司 在 商品 、 价 格 、 服 务 、 品 牌 、 配 送 渠道 等 方面 有 什么 优势 ”竞争 对 手 的 优势 能 否 学 习 ? 
如 何 根 据 自己 的 竞争 优势 来 确定 公司 的 营销 战略 ? 


(5) 如 何 为 客户 提供 信息 ”网 站 信息 来 源 在 哪里 ”信息 是 集中 到 网 站 编辑 处 更 新 、 发 布 还 是 由 各 部 门 自行 更 新 、 发 布 ” 集 中 发 布 可 能 安全 性 好 ， 便 于 管理 ， 但 信息 更 新 速度 可 能 较 慢 ， 有 时 还 可 能 出 现 
协调 不 力 的 问题 。 


17.2 ”网 站 的 版 面 布 局 及 色彩 


网 站 作为 一 种 媒体 ， 首 先 要 吸引 人 驻足 观看 。 设 计 良 好 、 美 观 、 清 晰 、 到 位 的 网 站 整体 结构 和 定位 ， 令 访问 者 初次 浏览 即 对 网 站 “一 见 钟情 ”， 进 而 阅读 细节 内 容 。 


17.2.1 ”确定 网 站 的 色彩 

企业 网 站 给 人 的 第 一 印象 是 网 站 的 色彩 ， 因 此 确定 网 站 的 色彩 搭配 是 相当 重要 的 一 步 。 一 般 来 说 ， 一 个 网 站 的 标准 色彩 不 应 超过 3 种 ， 太 多 则 让 人 有 眼花 综 乱 。 标 准 色彩 用 于 网 站 的 标志 、 标 题 、 导 航 栏 和 
主 色 块 ， 给 人 以 整体 统一 的 感觉 。 

. 绿色 企业 网 站 


绿色 在 企业 网 站 中 也 是 使 用 较 多 的 一 种 色彩 。 在 使 用 绿色 作为 企业 网 站 的 主 色 调 时 ， 通 常会 使 用 渐变 色 过 渡 ， 使 页 面具 有 立体 的 空间 感 。 绿 色 在 一 些 食品 企业 网 站 中 使 用 的 也 非常 多 。 一 方面 是 因为 绿 
色 能 够 表现 出 食品 的 自然 无 公害 ; 另 一 方面 也 能 够 很 好 地 提高 消费 者 对 企业 的 可 信 度 。 


. RESLA 


使 用 蓝 色 作 为 网 站 主 色调 的 企业 非常 多 。 因 为 蓝 色 的 沉稳 、 高 科技 和 严肃 的 色彩 内 涵 ， 使 得 监 色 页 面 能 体现 出 企业 的 稳重 大 气 与 科技 的 主题 。 深 蓝 色 与 浅 监 色 搭配 ， 整 体 页 面 和 谐 美 观 ， 很 适合 高 科技 
企业 。 在 企业 网 站 中 ， 蓝 色 与 白色 或 灰色 等 中 性 色彩 搭配 使 用 ， 能 突出 蓝 色 色彩 内 涵 。 商 务 企 业 网 站 ， 采 用 蓝天 白云 背景 作为 页 面 的 视 党 中心， 整体 页 面 主 次 分 明 ， 重 点 突出 ， 具 有 很 强 的 商务 性 。 


- 红色 企业 网 站 


使 用 红色 作为 页 面色 彩 的 主 色 调 与 其 他 色彩 搭配 ， 能 有 效 地 衬托 企业 网 站 的 庄严 ， 红 色 的 活力 使 该 企业 网 站 具有 入 勃 向 上 的 朝气 。 使 用 灰色 和 白色 可 以 与 红色 搭配 。 因 为 这 两 种 颜色 比较 中 庸 ， 能 和 任 
何 色彩 搭配 ， 使 对 比 更 强烈 ， 突 出 网 站 品质 和 形象 。 


17.2.2 草案 及 粗略 布局 


版 面 指 的 是 浏览 器 看 到 的 完整 的 一 个 页 面 。 因 为 每 个 人 的 显示 器 分 辨 率 不 同 ， 所 以 同一 个 页 面 的 大 小 可 能 出 现 640x480 像 素 ，800x600 像 素 ，1024x 768 像 素 等 不 同 尺 寸 。 


布局 ， 就 是 以 最 适合 浏览 的 方式 将 图 片 和 文字 排放 在 页 面 的 不 同位 置 。 版 面 布局 也 是 一 个 创意 的 问题 ， 但 要 比 站 点 整体 的 创意 容易 、 有 规律 得 多 。 先 来 了 解 一 下 版 面 布 局 的 步骤 : 


№ 


1. 草 


新 建 页 面 就 像 一 张 白 纸 ， 没 有 任何 表格 、 框 架 和 约定 俗 成 的 东西 ， 可 以 尽 可 能 地 上 发挥 你 的 想象 力 ， 将 想到 的 “景象 ” 画 上 去 。 这 属于 创造 阶段 ， 不 讲究 细 甩 工整 ， 不 必 考 虑 细节 功能 ， 只 以 粗 陋 的 线条 


勾画 出 创意 的 轮廓 即 可 。 尽 可 能 多 画 几 张 ， 最 后 选 定 一 个 满意 的 作为 继续 创作 的 脚本 。 


2. 粗 略 布局 


та) 
在 草案 的 基础 上 ， 将 确定 需要 放置 的 功能 模块 安排 到 页 面 上 。 注 意 ， 这 里 我 们 必须 遵循 突出 重点 、 平 衡 谐 调 的 原则 ， 将 网 站 标志 、 主 菜单 等 最 重要 的 模块 放 在 最 显眼 、 最 突出 的 位 置 ， 然 后 在 考虑 次 要 
模块 的 排放 。 
3. 定 案 


将 粗略 布局 精细 化 、 具 体 化 。 在 布局 过 程 中 ， 可 以 遵循 以 下 原则 : 

. 正常 平衡 : 亦 称 “匀称 ”。 多 指 左右 、 上 下 对 照 形 式 ， 主 要 强调 秩序 ， 能 达到 安定 诚实 、 信 赖 的 效果 。 

ЖЕЖ: 即 非 对 照 形式 ， 但 也 要 平衡 和 韵律 ， 当 然 都 是 不 均 整 的 ， 此 种 布局 能 达到 强调 性 、 不 安 性 、 高 注目 性 的 效果 。 

РЙ: 所 谓 对 比 ， 不 仅 利 用 色彩 、 色 调 等 技巧 来 表现 ， 在 内 容 上 也 可 涉及 十 与 今 、 新 与 旧 、 贫 与 富 等 对 比 。 

凝视 : 所 谓 凝 视 是 利用 页 面 中 人 物 视线 ， 使 浏览 者 仿照 跟随 的 心理 ， 以 达到 注视 页 面 的 效果 ， 一 般 多 用 明星 凝视 状 。 

Жа: 空白 有 两 种 作用 ， 一 方面 对 其 他 网 站 表示 突出 卓越 ， 另 一 方面 也 表示 网 页 品位 的 优越 感 ， 这 种 表现 方法 对 体现 网 页 的 格调 十 分 有 效 。 


` 尽量 用 图 片 解说 : 此 法 对 不 能 用 语言 说 服 ， 或 用 语言 无 法 表达 的 情感 特别 有 效 。 图 片 解说 的 内 容 ， 可 以 传达 给 浏览 者 更 多 的 心理 因素 。 


173 ”设计 网 站 让 页 


对 于 网 站 来 说 ， 重 中 之 重 的 页 面 就 是 首页 了 ， 能 够 做 好 首页 就 相当 于 做 好 网 站 的 一 半 了 。 


ERT НГ TA ВЕЕ: 100032 
使 用 帮助 | 法 律 声明 | 反馈 留言 


图 17-1 企业 网 站 首页 


1. 设 计 整 体 背景 和 导航 


01 ”打开 Photoshop CC， 选 择 菜单 栏 中 的 “文件 ”| “新 建 ”命令 ， 弹 出 “新 建 ” 对 话 框 ， 在 该 对 话 框 中 将 “宽度 ”设置 为 1024 像 素 ，“ 高 度 ” 设 置 为 768 像 素 ，“ 背 景 内 容 ” 设 置 为 “白色 ”， 单 
击 “ 确 定 ” 按 钮 ， 新 建文 档 ， 如 图 17-2 所 示 。 


02 在 工具 箱 中 选择 渐变 工具 图 标 ， 在 选项 栏 中 单 击 “ 点 按 可 编辑 渐变 ”按钮 ， 在 弹出 的 “渐变 编辑 器 ”对 话 框 中 设置 渐变 颜色 ， 如 图 17-3 所 示 。 
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4172 “新 建 ” 对 话 杠 


BRON): 


图 17-3 ”设置 渐变 颜色 


03 ”在 文档 中 按 住 鼠 标 左 键 ， 从 上 往 下 拖 动 绘制 渐变 背景 ， 如 图 17-4 所 示 。 


04 ”选择 工具 箱 中 的 自 定义 形状 工具 ， 在 自 定义 形状 工具 选项 栏 中 单 击 “ 形 状 ” 右 侧 的 小 箭头 ， 在 弹出 的 列表 中 选择 相应 的 形状 如 图 17-5 所 示 。 
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图 17-4 ”绘制 渐变 的 背景 


图 17-5 ”选择 自 定 义 形状 工具 


05 在 文档 中 按 住 鼠 标 左 键 拖 动 绘制 形状 ， 如 图 17-6 所 示 。 


06 选择 菜单 栏 中 的 “图 层 ”| “图 层 样 式 | “ЖЖ” 命令， 弹出 “图 层 样 式 ” 对 话 框 ， 在 对 话 框 中 设置 相关 参数 ， 如 图 17-7 所 示 。 


图 17-6 ”绘制 形状 
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4177 “图 层 样式 ”对 话 框 
07 жақ “Ял” ” 按钮， 设置 图 层 样式 ， 如 图 17-8 所 示 。 


08 ”选择 工具 箱 中 的 横 排 文 字 工 具 ， 在 工具 选项 栏 中 设置 字体 为 “华文 新 魏 ”， “字号” 设 为 72 点 ， 顾 色 设 置 为 白色 ,在 页 面 左 上 角 输 入 文字 ， 如 图 17-9 所 示 。 


4178 设置 图 层 样 式 


4179 输入 文本 


09 选择 工具 箱 中 的 短 形 工具 ， 在 选项 栏 中 将 填充 颜色 设置 为 白色 ， 在 舞台 中 绘制 矩形 ， 如 图 17-10 所 示 。 


10 选择 菜单 栏 中 的 “文件 | “ЖА? 命令， 弹出“ 置 入 ”对 话 框 ， 如 图 17-11 所 示 。 


图 17-10 ”绘制 矩形 
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917-11 ЕЛЕ 


11 ”将 banner01.jpeg 文 件 置 入 到 文档 中 ， 并 调整 置 入 图 像 的 位 置 ， 如 图 17-12 所 示 。 


12 ”选择 工具 箱 中 的 横 排 文字 工具 ， 在 工具 选项 栏 中 设置 “字体 ”为 华文 新 魏 ，“ 字 号 ”为 2 点， 输入 文字 ， 如 图 17-13 所 示 。 
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817-13 ”输入 文本 


选择 菜单 栏 中 的 “图 层 ”| “图 层 样 式 ”|“ 混 合 选项 ”命令 ， 弹 出 “图 层 样式 ”对 话 框 ， 在 对 话 框 中 单 击 “ 样 式 ”按钮 ， 在 弹出 的 对 话 框 中 选择 样式 ， 如 图 17-14 所 示 。 


14 单 击 “确定 ”按钮 ， 设置 图 层 样 式 ， 如 图 17-15 所 示 。 


817-14 “ВЕКА” пин 


图 17-15 设置 图 层 样 式 


15 单 击 选择 工具 箱 中 的 圆 角 和 珑 形 工具 ， 在 性 台中 绘制 圆 角 短 形 ， 如 图 17-16 所 示 。 


16 选择 菜单 中 的 “图 层 ”| “ЖАЖА” | “混合 选项 ”命令 ， 弹 出 “图 层 样式 ”对 话 框 ， 单 击 右 侧 的 “样式 ”选项 ， 选 择 设 置 的 图 层 样式 ， 如 图 17-17 所 示 。 
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图 17-17 “图 层 样式 ”对 话 框 


17 + “Ая” Ей, 设置 图 层 样 式 ， 如 图 17-18 所 示 。 


18 选择 工具 箱 中 的 横 排 文字 工具 ， 在 姓 台 中 输入 文本 “中 文 版 ”， 如 图 17-19 所 示 。 
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图 17-18 设置 图 层 样 式 


图 17-19 ”输入 文本 


19 FA 1518# НЩЯЖЕЖ, ЭЛ Хх ХЕ пози, 4 17-2057. 


20 ”选择 工具 箱 中 的 横 排 文字 工具 ， 在 三 台中 输入 文本 ， 如 图 17-21 所 示 。 
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817-20 ”输入 文字 
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图 17-21 输入 文字 


切割 首页 是 网 页 设计 中 非常 重要 的 一 环 ， 它 可 以 很 方便 地 为 我 们 标明 哪些 是 图 片区 域 ， 哪 些 是 文本 区 域 。 另 外 ， 合 理 的 切 图 还 有 利于 加 快 网 页 的 下 载 速度 、 设 计 复 杂 造 型 的 网 页 ， 以 及 对 不 同 特点 的 图 
片 进行 压缩 等 优点 。 切 割 网 站 首页 效果 如 图 17-22 所 示 。 
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817-22 ”切割 网 站 首页 
01 打开 刚 制 作 的 首页 图 像 ， 选 择 工 具 箱 中 的 切片 工具 ， 在 工具 选项 栏 中 设置 “样式 ”为 正常 ， 如 图 17-23 所 示 。 


02 按 住 鼠 标 左 键 在 姓 台 中 拖 动 绘制 短 形 切片 ， 如 图 17-24 所 示 。 
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图 17-24 АНЖУ 


使 用 同样 的 方法 可 以 绘制 更 多 的 切片 ， 如 图 17-25 所 示 。 


04 在 图 像 上 设置 好 切片 后 ， 选 择 菜 单 栏 中 的 “文件 ”| “存储 为 Web 所 用 格式 ”命令 ， 弹 出 “存储 为 Web 所 用 格式 ”对 话 框 ， 如 图 17-26 所 示 。 


在 对 话 框 中 ， 各 个 切片 都 作为 独立 文件 存储 ， 并 具有 各 自 独立 的 设置 和 颜色 调 板 ， 单 击 “ 存 储 ” 按 钮 ， 弹 出 “将 优化 结果 存储 为 ”对 话 框 ，“ 格 式 ” 选 择 “HTML 和 和 图像” 选项 ， 如 图 17-27 所 示 。 
“文件 名 ”文本 框 中 输入 “网 站 首页 .html”， 如 图 17-22 所 示 。 


English 


TAER | EEF | ЕЕ 


617-255 ”绘制 更 多 的 切片 
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817-26 “存储 为 Web 所 用 格式 ”对 话 框 
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图 17-27 “将 优化 结果 存储 为 ”对 话 框 


174 BESIR 


利用 Dreamweaver 可 以 在 本 地 计算 机 上 创建 出 网 站 的 框架 ， 从 整体 上 把 握 网 站 全 局 ， 完 成 网 站 文件 的 管理 和 测试 。 创 建 本 地 站 点 具体 操作 步骤 如 下 。 
01 启动 Dreamweavetr， 选 择 菜单 栏 中 的 “站 点 ”| “管理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 话 框 ， 在 对 话 框 中 单 击 “新 建站 点 ”按钮 ， 如 图 17-28 所 示 。 


02 弹出 “站 点 设置 对 象 ”对 话 框 ， 在 对 话 框 中 单 击 “ 站 点 ”选项 卡 ， 在 “站 点 名 称 ” 文 本 框 中 输入 名 称 ， 可 以 根据 网 站 特点 起 一 个 名 字 ， 如 图 17-29 所 示 。 


{1728 “管理 站 点 ”对 话 框 


图 17-29 输入 站 点 名 称 


03 单 击 “本 地 站 点 文件 夹 ”文本 框 右边 的 “浏览 文件 夹 ” 按 钮 ， 弹 出 “选择 根 文件 夹 ” 对 话 框 ， 选 择 站 点 文件 ， 如 图 17-30 所 示 ， 单 击 “ 选 择 文件 夹 ”按钮 。 


04 返回 “站 点 设置 对 象 ” 对 话 框 ， 选 择 站 点 文件 夹 后 如 图 17-31 所 示 。 
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17-30 选择 站 点 文件 
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17-31 指定 站 点 文件 夹 位 置 后 


05 单 击 “ 保 存 ” 按 钮 ， 更 新 站 点 缓存 ， 出 现 “ 管 理 站 点 ”对 话 框 ， 其 中 显示 了 新 建 的 站 点 ， 如 图 17-32 所 示 。 


06 单 击 “完成 ”按钮 ， 此 时 在 “文件 ”面板 中 可 以 看 到 创建 的 站 点 文件 ， 如 图 17-33 所 示 。 


图 17-32 “管理 站 点 ”对 话 框 
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17-33 ”创建 的 站 点 


17.5 二 级 模板 页 面 的 设计 


在 企业 网 站 中 ， 由 于 二 级 页 面 风格 相似 。 若 在 设计 网 站 时 ， 一 一 制作 这 些 风格 相似 的 网 页 ， 不 仅 浪 费时 间 而 且 也 不 利于 后 期 的 网 站 维护 ， 


17.5.1 创建 库 文件 


库 是 一 种 用 来 存储 要 在 整个 站 点 上 经 常 重复 使 用 或 者 更 新 的 页 面 元 素 的 方法 。 通 过 库 可 以 有 效 地 管理 和 使 用 站 点 上 的 各 种 资源 。 具 体操 作 步 又 如 下 。 


01 ”选择 菜单 栏 中 的 “文件 ”| “新 建 ” 命 令 ， 弹 出 “新 建文 档 ”对 话 框 ， 在 对 话 框 中 选择 “空白 页 ”| “ 库 项 目 ” 选 项 ， 如 图 17-34 所 示 。 


02 单 击 “创建 ”按钮 ， 创 建 一 个 空白 的 文档 ， 如 图 17-35 所 示 。 


这 时 不 妨 运 用 Dreamweaver 模 板 和 库 来 制作 网 页 。 
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17-34 “新 建文 档 ” 对 话 框 
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817-35 ”新 建文 档 
03 ”将 光标 置 于 页 面 中 ， 选 择 菜单 栏 中 的 “插入 ”| “表格 ”命令 ， 弹 出 “表格 ”对 话 框 ， 在 对 话 框 中 将 “ 行 数 ” 设 置 为 2，“ 列 ”设置 为 1，“ 表 格 宽度 ”设置 为 1024 像 素 ， 如 图 17-36 所 示 。 


04 单 击 “确定 ”按钮 ， 插 入 表格 ， 如 图 17-37 所 示 。 


wA x 


图 17-36 “表格 ”对 话 框 


图 17-37 插入 表格 


05 “将 光标 置 于 第 1 行 单元 格 中 ， 选 择 菜单 栏 中 的 “插入 ”| “Щй” | “图像 ”命令 ,弹出 “选择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 中 选择 图 像 文件 ， 图 17-38 所 示 。 


06 单 击 “ 确 定 ” 按 钮 ， 在 网 页 中 插入 图 像 ， 如 图 17-39 所 示 。 
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图 17-38 “选择 图 像 源 文件 ”对 话 框 
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417-39 ”插入 图 像 
07 ”将 光标 置 于 表格 的 第 2 行 ， 选 择 菜单 栏 中 的 “插入 ”| “ЩЙ” | “图 像 ” 命令， 分 别 在 第 2 行 单元 格 中 插入 图 像 ， 如 图 17-40 所 示 。 


08 ”选择 菜单 栏 中 的 “文件 ”| “保存 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 在 对 话 框 中 的 “文件 名 ”文本 框 中 输入 top.lbi， 如 图 17-41 所 示 。 
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817-40 ”插入 图 像 


= Windows8_O5 
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图 17-41 “另存 为 ”对 话 框 


09 单 击 “保存 ”按钮 ， 创 建 库 ， 如 图 17-42 所 示 。 
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17.5.2 ”创建 模板 


使 用 模板 能 够 帮助 设计 者 快速 制作 出 一 系列 具有 相同 风格 的 网 页 。 制 作 模板 与 制作 普通 网 页 相同 ， 但 是 不 把 网 页 的 所 有 部 分 都 制作 完成 ， 而 是 只 把 导航 栏 和 标题 栏 等 各 个 网 页 的 公有 部 分 制作 出 来 ， 把 
中 间 部 分 留 给 各 个 网 页 安排 具体 内 容 。 具 体操 作 步 骤 如 下 。 

01 ”选择 菜单 栏 中 的 “文件 ”| “新 建 ”命令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 在 对 话 框 中 选择 “ 空 百 页 ”| “HTML 模板 ”|“ 无 ”选项 ， 如 图 17-43 所 示 。 

02 单 击 “创建 ”按钮 ， 即 可 创建 一 个 空白 模板 网 页 ， 如 图 17-44 所 示 。 


03 选择 菜单 栏 中 的 “文件 ”| “另存 为 ”命令 ， 弹 出 Dreamweavet 提 示 对 话 框 ， 如 图 17-45 所 示 。 
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图 17-43 “新 建文 档 ” 对 话 框 
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17-44 创建 模板 


04 单 击 “ 确 定 ” 按 钮 ， 弹 出 “另存 模板 ”对 话 框 ， 在 对 话 框 中 的 “另存 为 ”文本 框 中 输入 moban.dwt， 如 图 17-46 所 示 。 单 击 “ 保 存 ” 按 钮 ， 即 可 完成 模板 的 创建 。 
Dreamweaver 


此 模板 不 含有 任何 可 编辑 区 域 。 您 想 维 续 9? 
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图 17-45 Dreamweaver 53726 ЛЕ 
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17-6 “另存 为 ”对 话 框 


05 ”选择 菜单 栏 中 的 “修改 ”| “页 面 属性 ”命令 ， 弹 出 “页 面 属性 ”对 话 框 ， 在 对 话 框 中 将 “上 边 距 ”“ 下 边 距 ”“ 左 边 距 ”和 “右边 距 ” 设 置 为 0， 单 击 “ 确 定 ” 按钮， 修改 页 面 属性 ， 如 图 17-47 
所 示 。 


06 ”将 光标 置 于 页 面 中 ， 选 择 菜单 栏 中 的 “插入 ”| “表格 ”命令 ， 弹 出 “表格 ”对 话 框 ， 将 “ 行 数 ” 设 置 为 3，“ 列 数 ” 设 置 为 1， “表格 宽度 ”设置 为 1024 像 素 ， 如 图 17-48 所 示 。 
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图 17-48 “表格 ”对 话 框 


07 单 击 “确定 ”按钮 ， 插入 表格 ， 此 表格 记 为 表格 1， 如 图 17-49 所 示 。 


08 ”将 光标 置 于 表格 1 的 第 1 行 单元 格 中 ， 选 择 菜单 栏 中 的 “窗口 ”| “资源 ”命令 ， 单 击 “ 库 ”按钮 ， 如 图 17-50 所 示 。 
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817-49 插入 表格 1 
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17-50 “Ж” вм 


09 单 击 底 部 的 “插入 ”按钮 ， 插 入 库 文件 ， 如 图 17-51 所 示 。 


10 “将 光标 置 于 表格 1 的 第 2 行 单 元 格 中 ， 插 入 1 行 2 列 的 表格 ， 将 其 属性 设置 为 表格 2， 如 图 17-52 所 示 。 
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917-52 ”插入 表格 


11 ”将 光标 置 于 表格 2 第 1 列 单元 格 中 ， 选 择 菜 单 栏 中 的 “插入 ”| “表格 ”命令 ， 插 入 8 行 1 列 的 表格 ， 此 表格 记 为 表格 3， 如 图 17-53 所 示 。 


12 将 光标 置 于 表格 3 的 第 1 行列 单元 格 中 ， 选 择 菜单 栏 中 的 “插入 ”| “ 图像 | “图 像 命令， 插入 图 像 文件 setvice.gif， 如 图 17-54 所 示 。 
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17-53 ”插入 表格 2 
Өнген НАТ 2mvirte mb ber dwl 


е и. | 


És 


创 霹 价值 服务 民生 


TL E a даа. А di ЕЗІ eikite 


š 
Е 


"а" йай 


. 
. 
HT 
oral "u"a Ë "u"a Ë "sa В "аай Я "s Ú 8 "s ЛЫ ЕЕЕ ЕЕН 
. 
и 
=m m m=m и =m sm s s m m. m ma m m m си m шн m wm u си и = m = m ms m m== m m= m нән и s=." m." 
. 
п m= и = mm = ии == m шш и шаш п mem u шеш и шоши =m m = sm ss s ms m шел m шеш m шеш n шеш u =s s - 
а. 
. 
PETS ESA mna пил, поп, пош, поп, пас По пон пон пил, пип, Ens ип, бири, ан, Es. ин. LL: 
. 


. 
е . 
КАПАНИ ашка REE A о ЕРА ЕАК АН ЧУВА 
. 


и: ЛЕЛЕ ААЙ А АРАД ТУРЙ Р ЛУБ ЛУ АЛЕТ 


T ЖЕНЕ FI TETTETETT rT ETTEI жгт ушы мм ыл. Дт Зола таа тт ааыл, тата КТ даа. ттт Lisa rm даи sum ss жалан жала кти Li ل‎ TIT IPT | 
Е, mm "a = "mna юра ёа н.да, 


rm r ha aa та 5244252) жұла да ттен РЗ т е отан, е а р т н ыа Руб Анаа нүн سا‎ а раина n = л, ا‎ өсе А е ЕР ГОРИ д i a бави тое а m н Ñ 


x А и |” 3 
mm |) О © 


ү күт пари АС Ta ЫР, Кү р ыы š =, ТК а 


a 4 - ж - - 
T) کے کے‎ Е-Е МАРЕ Сыч ОТЕГЪЕИЕЛЕЕЕ — = рыт 


d = ЕЕ - + 
ыш, па Гота ы +o ааа PRR В ы ы [Taro ЕШ WB uds ==. 


917-54 ”插入 图 像 文件 
13 将 光标 置 于 第 2~6 行 单元 格 中 ， 输 入 导航 分 类 文字 ， 如 图 17-55 所 示 。 


14 ”将 光标 置 于 表格 3 的 第 7、8 行 单元 格 中 ， 选 择 菜单 栏 中 的 “插入 ”| “图 像 ”| “图 像 ”命令 ， 插 入 图 像 ， 如 图 17-56 所 示 。 
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图 17-55 ”输入 文字 
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Щ1756 ”插入 图 像 
15 “将 光标 置 于 表格 2 的 第 2 列 单元 格 中 ， 选 择 菜单 栏 中 的 “插入 ”| “БАЯ” | “可 编辑 区 域 ” 命 令 ， 弹 出 “新 建 可 编辑 区 域 ” 对 话 框 ， 如 图 17-57 所 示 。 


16 ”保存 文档 ， 插 入 可 编辑 区 ， 效 果 如 图 17-58 所 示 。 


此 区 域 将 可 以 在 其 于 该 模板 的 文档 
тант. 


617-557 “新 建 可 编辑 区 域 ” 对 话 框 
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图 17-58 ”插入 图 像 
17 ”将 光标 置 于 表格 1 第 3 行 单元 格 中 ， 在 “属性 ”面板 中 将 背景 闫 色 设 置 为 #0EA4A6， 如 图 17-59 所 示 。 


18 ”保存 文档 ， 插 入 可 编辑 区 ， 效 果 如 图 17-60 所 示 。 
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图 17-60 ”输入 文本 


17.5.3 ”利用 模板 创建 二 级 页 面 


模板 用 于 制作 风格 相同 、 内 容 并 列 的 网 页 ， 具 有 统一 的 外 观 格 式 。 将 一 个 模板 应 用 于 多 个 页 面 后 ， 可 以 通过 编辑 模板 来 达到 修改 所 有 页 面 的 效果 。 利 用 模板 创建 二 级 页 面 的 效果 如 图 17-61 所 示 ， 具 体 
操作 步骤 如 下 。 
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图 17-61 利用 模板 创建 二 级 页 面 效 果 
01 选择 菜单 栏 中 的 “文件 ”|“ 新 建 ”命令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 在 对 话 框 中 选择 “网 站 模板 ”| “站 点 ”| “17”|moban 选 项 ， 如 图 17-62 所 示 。 


02 单 击 “创建 ”按钮 ， 利 用 模板 创建 网 页 ， 如 图 17-63 所 示 。 
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17-62 “新 建文 档 ” 对 话 框 
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617-653 ”利用 模板 创建 网 页 
03 选择 菜单 栏 中 的 “文件 ”| “保存 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 在 对 话 框 中 的 “文件 名 ”中 输入 名 称 ， 如 图 17-64 所 示 。 


04 单 击 “ 保 在 ”按钮 ， 保 存 文 档 ， 将 光标 置 于 可 编辑 区 域 中 ， 选 择 菜 单 栏 中 的 “插入 ”| “表格 ”命令 ， 弹 出 “表格 ”对 话 框 ， 在 对 话 框 中 将 “ 行 数 ” 设 置 为 3，“ 列 ”设置 为 1， “表格 宽度 ”设置 
为 95%， 如 图 17-65 所 示 。 
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图 17-64 “另存 为 ”对 话 框 


图 17-65 “表格 ”对 话 框 


05 “ 单 击 “确定 ”按钮 ， 播 入 表格 ， 此 表格 记 为 表格 5， 如 图 17-66 所 示 。 


06 “将 光标 置 于 表格 5 的 第 1 行 单元 格 中 ， 输 入 文字 “公司 简介 ， 在 “属性 ”面板 中 设置 字体 大 小 和 颜色 ， 如 图 17-67 所 示 。 


“Tr -RT судыр 7 


EEN ЧИЕ 


SHEER HE ES Лау ве Чї a CEC. te ЫШ EE хс» ке. 


= is | - = м СЪ не! 


к Үйі —— . 


Е Ш | 
сы к 


17-66 MARKS 


н тр 
ЕР 


= . 
" н 
= = 
. н 
а аа панинин ашу 
2.8 8 Вальт, 
| 
J 


WA naa an Кен ҮҮ ҮҮ 
" пап mun nan пп nnn ди пипипип п 
в =! Н š 

В "п 


писна пппипип ининин ппшипнип пипинпп пипинипп nnnnunu пишини nnnmunu nunnunnun шапиния nnmnnn sununun пппипип но 
п mannamun annman” иннии 


. . 
sm Ea; ama "ian 4:4 mwa 
w'a"a" û Š š шїн а а R ša u"a" š m ии и 


т 


图 17-67 输入 文字 


07 ”将 光标 置 于 第 2 行 单元 格 中 ， 选 择 菜单 栏 中 的 “插入 ”| “水 平 线 ”命令 ， 插 入 水 平 线 ， 如 图 17-68 所 示 。 


08 ”将 光标 置 于 第 3 行 单元 格 中 ， 输 入 公司 简介 文本 ， 如 图 17-69 所 示 。 
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817-68 ”插入 水 平 线 
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17-69 输入 文本 
09 ”将 光标 置 于 文本 中 ， 选 择 菜单 栏 中 的 “插入 ”| “А” | “图像 ”命令 ， 插 入 图 像 tu.jjpg， 如 图 17-70 所 示 。 
10 单 击 选中 图 像 文 件 后 右 击 ， 在 弹出 的 列表 中 选择 “ 右 对 齐 ”， 设 置 右 对 齐 ， 如 图 17-71 所 示 。 


11 保存 文档 ， 按 F12 功 能 键 进入 浏览 器 中 预览 ， 效 果 如 图 17-61 所 示 。 
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图 17-71 设置 对 齐 方式 


17.6 ”网 站 推广 


网 站 推广 就 是 以 国际 互联 网 为 基础 ， 利 用 数字 化 的 信息 和 网 络 媒 体 的 交互 性 来 辅助 营销 目标 实现 的 一 种 新 型 的 市 场 营 销 方式 。 简 单 地 说 ， 网 站 推广 就 是 以 互联 网 为 主要 手段 进行 的 ， 为 达到 一 定 营销 目 
的 的 推广 活动 。 


17.61 ”网 站 推广 的 目的 

下 面 就 介绍 一 下 网 站 推广 的 基本 目的 。 
1. 提 升 品牌 知名 度 

很 多 网 站 ， 特 别 是 个 人 网 站 很 不 重视 品牌 的 建设 ， 其 实 建立 自己 的 网 站 品牌 是 很 重要 的 ， 特 别 是 网 站 流量 达到 一 定 高 度 时 。 品 牌 知 名 度 说 白 了 就 是 让 大 家 都 知道 你 的 网 站 。 
2. 提 升 流量 


对 于 大 部 分 网 站 来 说 ， 流 量 是 其 根本 。 但 是 不 同 级 别 的 网 站 ， 提 升 流量 的 方法 是 不 同 的 。 对 于 流量 推广 ， 一 定 要 根据 自身 的 情况 去 制订 符合 自身 情况 的 推广 方案 。 如 果 本 身 的 流量 基数 和 预订 指标 相差 
不 多 ， 那 常规 的 方法 可 能 就 能 完成 。 如 果 本 身 的 流量 基数 和 目标 相差 太 大 ， 那 就 要 有 效 地 整合 自身 资源 进行 深入 的 合作 推广 ， 甚 至 是 付费 推广 了 。 


3. 提 升 销售 额 


通常 以 销售 额 为 推广 目的 ， 常 见于 商城 及 网 店 ， 这 个 时 候 可 能 就 不 是 简单 的 推广 了 ， 还 要 融入 销售 的 理念 ， 因 为 这 个 时 候 让 别人 知道 你 的 网 站 ， 或 是 登录 你 的 网 站 都 不 是 最 重要 的 ， 让 他 产生 消费 行为 
才 是 关键 。 


4. 提 高 会 员 注册 量 


一 般 社 区 类 网 站 ， 都 是 以 此 为 主要 推广 目的 的 。 应 该 说 这 个 任务 是 比较 艰巨 的 ， 因 为 现在 很 多 互联 网 产品 都 需要 注册 ， 用 户 对 此 已 经 非常 麻木 了 。 


17.6.2 ”网 站 推广 的 方式 


通过 调查 表明 : 绝 大 多 数 人 上 网 查询 信息 使 用 的 都 是 搜索 引擎 ， 访 问 量 最 大 的 是 各 大 门户 网 站 。 企 业 供 推广 的 有 效 途 径 都 集中 在 一 些 大 型 B2B 电 子 商 务 网 站 (如 阿里 巴巴 、 慧 聪 等 ) ， 个 人 买卖 商品 都 
去 一 些 大 型 B2C 或 C2C 商 务 网 站 (如 淘宝 网 、 易 趣 网 等 ) ， 还 有 各 种 专业 的 行业 网 站 (如 : 各 种 化 工 网 站 、 建 材 了 网站、 培训 网 站 以 及 一 些 论坛 等 ) 。 因 此 ， 我 们 要 给 网 站 做 的 推广 就 是 要 将 用 户 的 网 站 在 各 
种 搜索 引擎 中 占据 有 利 的 位 置 ， 让 人 很 容易 搜索 到 。 另 外 ， 就 是 要 把 网 站 信息 放 到 人 和气 多 的 地 方 ， 提 高 曝光 率 ， 让 大 家 都 能 看 到 你 ， 因 此 ， 网 站 才能 有 较 高 的 访问 量 ， 让 企业 通过 互联 网 获得 最 大 的 效益 。 


目前 ， 网 络 推广 主要 有 8 种 形式 。 这 些 方 式 各 有 特点 ， 下 面 逐 一 对 其 介绍 。 
1. 登 录 搜 索引 警 


据 统 计 ， 除 电子 邮件 以 外 ， 信 息 搜索 已 成 为 第 二 大 互联 网 应 用 。 随 着 技术 的 进步 ， 搜 索 效率 不 断 提高 ， 用 户 在 查询 资料 时 不 仪 越 来 越 依 赖 于 搜索 引擎 ， 而 且 对 搜索 引 警 的 信任 度 也 日 渐 提 高 。 有 了 如 此 
坚实 的 用 户 基础 ， 利 用 搜索 引 警 宣传 企业 形象 和 产品 服务 肯定 能 获得 好 的 效果 。 所 以 对 于 信息 提供 者 ， 尤 其 是 对 商业 网 站 来 说 ， 目 前 很 大 程度 上 也 都 是 依靠 搜索 引擎 来 扩大 自己 的 知名 度 。 


如 图 17-72 所 示 在 百度 搜索 引擎 登录 网 站 。 注 册 时 尽量 详细 地 填写 企业 网 站 中 的 信息 ， 特 别 是 关键 词 ， 尽 量 写 得 普遍 化 、 大 众 化 一 些 ， 如 “公司 资料 ”最 好 写成 “公司 简介 ”。 
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917-72 ”在 百度 搜索 引擎 登录 网 站 


在 搜索 引擎 中 检索 信息 都 是 通过 输入 天 键 词 来 实现 的 。 因 此 ， 在 登录 搜索 引 警 时 一 定 要 填写 好 关键 词 。 那 么 如 何 才 能 找到 最 适合 你 的 关键 词 呢 ? 


首先 ， 要 仔细 揣摩 潜在 客户 的 心理 ， 绞 尽 脑 汁 设 想 他 们 在 查询 与 网 站 有 关 的 信息 时 最 可 能 使 用 的 关键 词 ， 并 一 一 将 这 些 词 记 下 来 


等 这 些 词 记 下 来 。 不 必 担 心 列 出 的 关键 词 会 太 多 ， 相 反 你 找到 的 关键 词 越 多 ， 履 盖 面 也 
越 大 ， 也 就 越 有 可 能 从 中 选 出 最 佳 的 天 键 词 。 

搜索 引擎 上 的 信息 针对 性 都 很 强 。 用 搜索 引擎 查找 资料 的 人 都 是 对 某 一 特定 领域 感 兴趣 的 群体 。 
2. 电 子 邮件 推广 

电子 邮件 推广 是 利用 邮件 地 址 列表 ， 将 信息 通过 E-mail 发 送 到 对 方 邮箱 ， 来 达到 宣传 推广 的 目的 。 电 子 邮 件 是 目前 使 用 最 广泛 的 互联 网 应 用 。 它 方便 快捷 ， 成 本 低廉 不失为 一 种 有 效 的 联络 工具 。 如 
图 17-73 所 示 为 使 用 电子 邮件 推广 网 站 。 
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图 17-73 ”使 用 电子 邮件 推广 网 站 


相 比 其 他 网 络 营销 手法 ， 电 子 邮件 营销 速度 非常 快 。 搜 索引 擎 优化 需要 几 个 月 ， 甚 至 几 年 的 努力 ， 才 能 充分 发 挥 效果 。 博 客 


营销 更 是 需要 时 间 ， 以 及 大 量 的 文章 。 而 电子 邮件 营销 只 要 有 邮件 数据 库 在 
+, 发 送 邮件 后 几 小 时 之 内 就 可 能 看 到 效果 ， 产 生 订单 。 互 联网 使 商家 可 以 立即 与 成 干 上 万 潜在 的 和 现 有 的 顾客 取得 联系 。 


由 于 发 送 E-mail 的 成 本 极 低 且 具有 即时 性 ， 因 此 ， 相 对 于 电话 或 邮寄 ， 是 顾客 更 愿意 响应 的 营销 活动 。 相 关 调 查 报告 显示 ，E-mail 的 点 击 率 比 网 络 横 幅 广告 和 旗帜 广告 的 点 击 率 平均 高 约 5%~15%，E- 
mail 的 转换 率 比 网 络 横幅 广告 和 旗帜 广告 的 转换 率 平均 高 约 10%~30%。 


3. 在 新 闻 组 和 论坛 上 发 布 网 站 信息 
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917-74 在 淘宝 网 的 论坛 中 发 布 信息 推广 网 站 


互联 网 上 有 大 量 的 新 闻 组 和 论坛 ， 人 们 经 常 就 某 个 特定 的 话题 在 上 面 展开 讨论 和 发 布 消息 ， 其 中 当然 也 包括 商业 信息 。 实 际 上 专门 的 商业 新 闻 组 和 论坛 数量 也 很 多 ， 不 少 人 利用 它们 来 宣传 自己 的 产 
品 。 但 是 ， 由 于 多 数 新 闻 组 和 论坛 是 开放 性 的 ， 几 乎 任何 人 都 能 在 上 面 随意 发 布 消息 ， 所 以 其 信息 质量 比 起 搜索 引擎 来 要 逊色 一 些 ， 而 且 在 将 信息 提交 到 这 些 网 站 时 ， 一 般 都 被 要 求 提 供电 子 邮 件 地 址 ， 这 
往往 会 给 坛 圾 邮件 提供 可 乘 之 机 。 当 然 ， 在 确定 能 够 有 效 控制 垃圾 邮件 前 提 下 ， 企 业 不 妨 也 可 以 考虑 利用 新 闻 组 和 论坛 来 扩大 宣传 面 。 如 图 17-74 所 示 为 在 淘宝 网 的 论坛 中 发 布 信息 推广 网 站 。 
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4. 网 络 广告 


网 络 广告 就 是 在 网 络 上 做 的 广告 。 利 用 网 站 上 的 广告 横幅 、 文 本 链接 、 多 媒体 的 方法 ， 在 互联 网 刊登 或 发 布 广告 ， 通 过 网 络 传递 到 互联 网 用 户 的 一 种 高 科技 广告 运作 方式 。 一 般 形 式 是 各 种 图 形 广告 ， 
称 为 旗帜 广告 。 网 络 广告 本 质 上 还 是 属于 传统 宣传 模式 ， 只 不 过 载体 不 同 而 已 。 如 图 17-75 所 示 为 使 用 网 络 广告 推广 网 站 。 
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图 17-75 ”使 用 网 络 广告 推广 网 站 
5. 交 换 链 接 / 广 告 互 换 
网 站 之 间 互 相交 换 链 接 和 旗帜 广告 有 助 于 增加 双方 的 访问 量 。 


如 果 网 站 提供 的 是 某 种 服务 ， 而 其 他 网 站 的 内 容 刚好 和 你 形成 互补 ， 这 时 不 妨 考 虑 与 其 建立 链接 或 交换 广告 ， 一 来 增加 了 双方 的 访问 量 
©, 


， 二 来 可 以 给 客户 提供 更 加 周全 的 服务 ， 同 时 也 避免 了 直接 的 竞 


此 外 ， 还 可 以 考虑 与 门户 或 专业 站 点 建立 链接 ， 不 过 这 项 工作 负担 很 重 。 首 先 要 逐一 确定 链接 对 象 的 影响 力 ， 其 次 要 征 得 对 方 的 同意 。 
6. 登 录 导 航 网 站 


现在 国内 有 大 量 的 网 址 导航 类 站 点 ， 如 http://www.hao123.com/、http://www.265.com/ 等 。 在 这 些 网 址 导航 类 做 上 链接 ， 也 能 带 来 大 量 的 流量 ， 不 过 现在 想 登 录像 hao123 这 种 流量 特别 大 的 站 点 
并 不 是 件 容易 的 事 。 


7. 软 文 炒作 推广 


顾名思义 ， 软 文 是 相对 于 硬性 广告 而 言 ， 由 企业 的 市 场 策划 人 员 或 广告 公司 的 人 员 来 负责 撰写 的 “文字 广告 ”。 与 硬 广告 相 比 ， 精 妙 之 处 就 在 于 一 个 “ 软 ” 字 ， 好 似 绵 里 茂 针 ， 收 而 不 露 ， 克 收 于 无 
形 ， 等 到 发 现 这 是 一 篇 软文 的 时 候 ， 已 经 冷 不 丁 地 掉 入 了 被 精心 设计 过 的 “软文 广告 ”陷阱 。 


АА 


通过 软文 可 以 把 自己 的 一 些 需 要 宣传 或 广告 的 事件 主动 暴露 给 报纸 、 杂 志 、 网 站 等 媒体 ， 以 达到 做 广告 的 效果 和 提高 知名 度 的 目的 。 软 文 在 当前 已 成 为 一 种 非常 实用 的 宣传 方法 ， 常 能 


达 不 到 的 效果 。 


得 做 硬性 广告 
在 软文 里 加 网 址 是 最 常见 的 一 种 广告 形式 ， 但 是 大 部 分 软文 都 会 被 管理 员 删 除 ， 因 为 管理 员 一 看 就 知道 这 是 一 篇 软文 。 如 果 是 可 读 性 并 不 强 的 文章 ， 网 址 与 文章 内 容 关 系 不 大 ， 那 么 这 篇 软文 就 不 会 被 

继续 转载 。 所 以 要 想 使 带 网 址 的 软文 具有 传播 性 ， 必 须要 让 文章 具有 可 读 性 、 震 撼 性 、 名 人 性 、 关 联 性 。 名 人 写 的 与 某 一 个 网 站 有 关系 的 文章 ， 一 般 都 会 不 断 地 被 转载 。 

8. 其 他 网 站 推广 方式 


传单 广告 的 一 个 最 大 的 优点 是 派发 简单 易 行 。 发 单 人 员 只 要 用 手袋 擒 一 袋 传单 就 可 以 随时 随地 派发 了 ， 其 简单 的 体力 劳动 无 须 派发 人 员 具 备 一 定 要 求 的 知识 和 技能 。 


现在 有 各 种 沙龙 、 俱 乐 部 。 如 果 你 是 卖 化 妆 品 的 ， 可 以 选择 参加 一 些 白领 的 活动 ， 或 女性 沙龙 等 ， 这 样 你 参加 活动 时 发 出 去 的 名 片 就 更 有 针对 性 了 。 


第 18 草 ”申请 域名 和 空间 


网 站 制作 完毕 ， 需 要 发 布 到 Web 服 务 器 上 ， 才 能 够 让 别人 浏览 ， 为 了 将 自己 的 网 站 上 传 到 互联 网 ， 需 要 有 作为 网 址 的 域名 以 及 作为 上 传 网 页 的 网 址 空间 一 一 服务 器 。 申 请 完 域名 和 空间 后 ， 再 利用 FTP 
软件 上 传 网 页 文件 即 可 。 


重点 内 容 


.完整 备案 基本 流程 


18.1 域名 选择 


域名 英文 名 为 Domain Name， 是 Internet 上 某 台 服务 器 的 名 称 ， 通 过 域名 可 以 访问 到 这 台 服 务 器 上 的 内 容 。 


1811 域名 概述 


互联 网 之 所 以 成 为 网 ， 是 因为 互联 网 具有 网 的 特性 ， 网 上 有 很 多 的 节点 和 网 格 ， 每 一 个 节点 上 都 有 一 台 服 务 器 ， 每 台 服 务 器 都 有 地 址 ， 这 个 地 址 用 IP 地 址 表示 ， 例 如 : 127.0.0.1 就 是 一 个 I|P 地 址 ， 它 是 
由 4 个 小 于 256 的 数字 加 上 “.” 组 成 的 。 我 们 看 到 这 个 IP 地 址 是 不 容易 记忆 和 书写 的 ， 所 以 人 类 就 发 明了 域名 这 个 名 词 来 代替 ， 这 就 是 域名 一 词 的 由 来 。 


sina.com 就 是 一 个 完整 的 域名 ， 它 包含 域名 主体 部 分 和 域名 后 缀 两 个 部 分 ， 主 体 部 分 是 我 们 购买 域名 的 时 候 自 己 注册 的 ， 就 像 现实 中 我 们 每 个 公司 或 商店 的 商标 一 样 。 这 样 的 域名 还 有 很 多 ， 例 如 : 


baidu.com、163.com、taobao.com 等 。 


域名 后 缀 有 很 多 ， 有 哪些 域名 后 缀 是 我 们 经 常用 到 的 呢 ， 每 一 个 域名 后 缀 又 代表 什么 意思 呢 ? 我们 看 下 常见 的 域名 后 缀 : .com、.net、.org、.edu、.gov、.ac、.cn、.info， 这 些 都 是 我 们 经 常 遇 到 并 
使 用 的 域名 后 缀 ， 并 且 每 一 个 域名 后 缀 都 有 独立 的 含义 ， 例 如 : .ac 是 用 于 科研 机 构 的 ， 一 般 个 人 是 无 法 注册 的 ; .com 是 用 于 企业 网 站 的 ; .edu 是 用 于 教育 机 构 的 ， 例 如 北京 大 学 和 清华 大 学 的 网 址 都 带 
有 .edu 这 个 域名 后 缀 ; 政府 的 英文 单词 是 government， 所 以 政府 的 域名 后 缀 为 .gov; 还 有 .net 用 于 互联 网 络 信息 中 心 和 运行 中 心 ，.info 提 供 信息 服务 的 企业 等 。 


18.1.2 ”域名 的 分 类 


这 么 多 的 域名 后 级 ， 为 了 更 好 地 记忆 ， 我 们 从 不 同 的 地 域 和 域名 形式 上 对 域名 进行 了 分 门 别 类 ， 从 地 域 上 可 分 为 : 国际 域名 和 国家 域名 。 


- 国际 域名 : 顾名思义 ， 就 是 能 够 在 国际 流通 而 不 受 地 域 的 限制 ， 世 界 上 任何 国家 和 地 区 都 可 以 使 用 ， 上 面 我 们 提 到 的 很 多 域名 后 缀 大 多 属于 国际 域名 的 范畴 ， 例 如 : .com、.ac、.info、.net、.org、 


- 国家 域名 : 和 国际 域名 是 相对 的 ， 它 是 针对 国家 和 地 域 进 行 分 配 的 域名 后 级 ， 其 中 常用 的 包括 : 中 国 是 cm， 美国 是 us， 上 日 本 是 jb， 香港 地 区 是 hk。 


1813 ”选择 域名 的 方法 


好 域名 的 基本 原则 是 好 记 ， 基 本 要 求 是 网 友 一 想起 你 的 网 站 ， 脑 海里 就 会 同时 浮现 出 你 的 网 站 的 域名 ， 例 如 想起 “搜狐 ”脑海 里 就 浮现 出 “sohu.com” 。 


好 记 的 域名 第 一 要 简短 (以 不 超过 6 个 字符 为 宜 ) ， 第 二 要 有 意义 。 这 其 实 和 人 的 名 字 一 样 ， 显 然 ， 三 个 字 的 名 字 比 十 个 字 的 名 字 要 好 记 ， 有 意义 的 名 字 比 无 意义 的 名 字 要 好 记 ， 对 此 我 们 或 多 或 少 都 有 
体验 。 


好 域名 还 要 求 易 输 入 、 易 辨别 ， 域 名 是 由 数字 、 字 母 和 “-”“_” 组 成 的 ， 数 字 、 字 母 和 “-” 都 可 以 直接 输入 ，“_” 则 需 借助 “Shift” 键 ; 另外 ，“-” 和 “_” 也 不 易于 辨别 一 一 所 以 ， 除 非 没有 别 
的 选择 ， 否 则 域名 里 最 好 不 要 出 现 “-” 或 “” 


以 下 是 几 种 起 域名 的 办 法 。 
1. 英 文 单词 

应 该 说 ， 最 好 的 域名 就 是 英文 单词 了 ， 像 “buy.com” “love.com” “china.com” 这 样 的 域名 个 个 价值 万 金 ， 不 过 ， 现 在 这 样 的 域名 已 经 很 难 申请 到 了 。 
2. 汉 语 拼音 


对 中 国人 来 说， 一 个 好 记 的 汉语 拼音 域名 也 许 是 不 错 的 选择 ， 尤 其 是 网 站 仅 面 向 国内 。 火 热 的 淘宝 (taobao.com) 就 是 用 的 汉语 拼音 域名 ， 还 有 dangdang.com，suning.com 等 都 是 采用 汉语 拼音 来 
作为 域名 的 。 


3 数字 


自 163 后 ， 纯 数字 域名 逐渐 被 世人 所 接受 ， 后 来 的 263、3721、8848 等 都 取得 了 成 功 ; 不 过 这 类 域名 现在 也 很 难 申请 了 ， 或 者 申请 到 ， 但 没什么 意义 。 


(1) 多 个 单词 (或 者 汉语 拼音 ) 的 一 般 取 每 个 单词 (或 者 汉语 拼音 ) 的 首 字母 ， 例 如 美国 在 线 的 域名 aol.com， 其 中 aol 就 是 Americanon line 的 缩写 。 
(2) 一 个 长 单词 一 般 取 单词 的 前 几 个 字母 ， 实 际 上 国际 顶级 域名 的 后 缀 就 是 这 么 得 来 的 ， 像 com、edu、org 分 别 是 commpany、education、organize 的 缩写 。 
5. 组 合 


英文 单词 、 汉 语 拼音 、 数 字 ， 两 两 组 合 可 以 组 合 出 很 多 适合 的 域名 ， 例 如 数字 和 英文 ， 此 类 最 著名 的 域名 是 51job。 


这 类 网 站 一 般 是 先 有 中 文 名 ， 然 后 根据 谐音 ， 生 造 出 英文 或 者 英文 和 数字 的 组 合 ， 例 如 国内 著名 的 电子 商务 站 点 爱 购物 (1905) 和 好 又 多 (hoyodo) 就 是 代表 ， 新 浪 、 搜 狐 也 可 以 归 入 此 类 。 


18.14 ”怎样 选择 最 佳 的 域名 
前 面 介 绍 了 域名 的 概念 以 及 分 类 ， 下 面 介 绍 怎样 选择 最 佳 的 域名 。 域 名 购买 时 需要 注意 哪些 技巧 ? 
1. 选 择 知名 域名 供应 商 


知名 品牌 公司 ， 无 论 是 从 服务 ， 还 是 从 产品 质量 上 来 说 ， 都 是 购买 域名 时 首选 的 供应 商 ， 因 为 这 样 后 期 的 域名 维护 会 非常 省 心 和 省 力 ， 这 里 给 大 家 列 出 国内 比较 著名 的 域名 供应 商 ， 如 表 18-1 所 示 。 


表 18-1 著名 域名 供应 商 


2. 挑 选 符合 自己 品牌 的 域名 


选 购 的 域名 要 把 网 站 相关 的 品牌 词 考虑 进去 ， 因 为 这 样 做 能 使 网 站 后 期 在 搜索 引擎 中 有 个 好 的 表现 。 当 然 有 的 时 候 不 能 尽 如 人 意 ， 也 许 注册 的 域名 已 经 被 别人 抢 注 了 ， 因 为 域名 是 具有 唯一 性 的 ， 所 以 
如 果 遇 到 这 种 情况 ， 只 能 更 换 域名 了 。 


3. 选 择 常 用 域名 后 绥 


这 个 是 必需 的 ， 虽 然 .edu 和 .org 本 身 就 具有 很 高 的 权重 ， 但 是 个 人 是 无 法 直接 注册 的 ， 需 要 从 其 他 方面 进行 补充 ， 用 户 习惯 就 是 一 个 很 好 的 方面 ， 例 如 .com 域 名 后 缀 由 于 本 身 就 是 用 于 企业 单位 的 ， 所 
以 一 般 企业 可 以 直接 使 用 这 样 的 域名 后 缀 。 


4. 购 买 老 域名 

这 也 是 一 个 很 好 的 方法 ， 因 为 老 的 域名 会 因为 年 限 原 因 ， 积 累 一 定 的 权重 ,权重 即 为 PR 值 ， 这 个 可 以 直接 影响 到 网 站 排名 ， 所 以 能 找到 一 个 老 域名 而 且 又 和 你 的 行业 相关 也 是 很 好 的 。 
5. 域 名 简单 易 记 

域名 简单 易 记 毫 无 疑问 能 为 你 的 网 站 加 分 ， 一 个 简单 易 记 的 网 站 域名 可 以 让 用 户 很 容易 记 住 ， 也 可 以 方便 用 户 再 次 光临 你 的 网 站 。 
6. 域 名 尽量 包含 关键 词 

如 果 想 让 网 站 在 搜索 引擎 中 有 个 很 好 的 表现 ， 域 名 中 带 有 关键 词 ， 能 够 让 百度 等 搜索 引擎 更 容易 识别 你 的 网 站 是 做 什么 的 。 


购买 域名 就 像 是 公司 或 商店 在 国家 工商 局 注册 商标 一 样 ， 非 常 重要 ， 所 以 选 购 的 时 候 一 定 要 注意 以 上 所 提 到 的 技巧 ， 不 然 会 影响 到 后 期 网 站 推广 和 网 站 营销 的 。 


18.1.5 ”域名 申请 流程 


万 网 是 中 国 最 大 的 域名 服务 商 ， 拥 有 多 年 域名 注册 管理 经 验 。 注 册 域 名 仅 需 简单 五 步 : 查询 域名 一 购买 域名 一 填写 域名 注册 信息 一 支付 一 购买 成 功 。 下 面 就 讲述 在 万 网 的 域名 申请 流程 ， 具 体操 作 步 又 
如 下 。 


01 首先 进入 万 网 的 域名 注册 页 面 查询 域名 有 没有 被 注册 ， 如 图 18-1 所 示 。 
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02 进入 域名 查询 结果 页 面 ， 匀 选 所 要 注册 的 域名 ， 单 击 “ 加 入 清单 ”按钮 ， 如 图 18-2 所 示 


03 单 击 “去 结算 ”按钮 ， 进 入 查看 购物 车 页 面 ， 进 入 核对 确认 订单 页 面 ， 填 写 


5 ЛЕ ШЕНИН > | 
23 съ АЕ ШЕГИН … 


сп ЕГЕР У + НИВА {FFI ЕЗІ 
жш Wb ~ 


ОПЕРА "ЖЕ Вай (TE) СИЛ 
ла ЖІ ~ 


М Лар EEST ИА 


完 注 


18-2 单 击 “ 加 入 清单 ”按钮 
息 页 面 ， 单 击 底部 的 “立即 购买 ”按钮 ， 如 图 18-3 所 示 。 
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4183 ”核对 确认 订单 页 面 


182 服务 器 空间 选择 


建 好 一 个 网 站 ， 只 要 找 个 网 站 服务 器 空间 把 网 站 文件 上 传 到 空间 ， 绑 定 域名 后 就 可 以 通过 域名 访问 我 们 的 网 站 了 。 


18.2.1 “服务 器 空间 的 几 种 类 型 


一 个 空间 的 稳定 与 否 直接 影响 着 网 站 后 期 的 发 展 。 做 网 站 如 果 选 不 对 空间 的 话 ， 那 后 期 带 来 的 及 烦 事 是 一 推 接 一 推 的 ， 例 如 今天 的 网 站 打开 速度 慢 ， 明 天 的 网 站 根本 打 不 开 ， 后 天 网 站 一 会 能 打开 一 会 
打 不 开 。 所 以 ， 不 要 在 空间 的 选择 上 节省 钱 ， 选 个 好 空间 是 重 中 之 重 。 一 般 有 下 面 几 种 空间 类 型 。 


1. 虚 拟 主机 


虚拟 主机 是 使 用 特殊 的 软 硬 件 技术 ， 把 一 台 运 行 在 因特网 上 的 服务 器 主机 分 成 一 台 台 “虚拟 ”的 主机 ， 每 一 台 虚 拟 主机 都 具有 独立 的 域名 ， 具 有 完整 的 Internet 服 务 器 (WWW, FTP, Emailê) 功 
能 ， 虚 拟 主机 之 间 完 全 独立 ， 并 可 由 用 户 自行 管理 ， 在 外 界 看 来 ， 每 一 台 虚 拟 主机 和 一 台独 立 的 主机 完全 一 样 。 


好 处 : 价格 便宜 ， 使 用 最 简单 。 这 种 空间 是 三 种 之 中 最 便宜 的 一 种 ， 而 且 使 用 也 是 最 简单 的 。 只 要 在 控制 面板 后 台 绑 定 自 己 的 域名 ， 等 解析 成 功 就 可 以 使 用 了 ， 解 析 时 间 要 看 空间 商 的 不 同 而 有 所 差 


不 足 之 处 : 流量 有 所 限制 ， 大 家 都 知道 虚拟 主机 就 是 在 一 个 服务 器 分 出 来 的 若干 个 版 块 ， 那 么 如 果 自 己 的 网 站 流量 相对 来 说 比较 大 的 话 ， 也 会 影响 带宽 ， 而 导致 同 服务 器 的 其 他 网 站 受到 访问 速度 的 困 


扰 ， 所 以 很 多 空间 商都 限制 了 每 台 虚 拟 主机 的 流量 。 即 使 不 限 流量 ， 如 果 你 的 网 站 流量 大 的 话 ， 那 么 访问 速度 也 会 有 所 下 降 。 
2.VPS 主 机 


VPS (Virtual Private server， 虚 拟 专用 服务 器 ) 技术 ， 将 一 部 服务 器 分 割 成 多 个 虚拟 专 享 服务 器 的 优质 服务 。 每 个 VPS 都 可 分 配 独 立 公 网 IP 地 址 、 独 立 操 作 系统 、 独 立 超大 空间 、 独 立 内 存 、 独 立 
CPU 资源 、 独 立 执行 程序 和 独立 系统 配置 等 。 用 户 除了 可 以 分 配 多 个 虚拟 主机 及 无 限 企业 邮箱 外 ， 更 具有 独立 服务 器 功能 ， 可 自行 安装 程序 ， 单 独 重启 服务 器 。 


好 处 : 价格 实惠 ， 服 务 态度 好 。 价 格 相对 三 种 来 说 算是 中 等 水 平 。 虚 拟 主机 实际 上 提供 的 是 服务 器 硬盘 特定 空间 服务 ， 而 VPSs 主 机 采用 先进 的 虚拟 化 技术 ， 为 用 户 提供 一 个 虚拟 专用 的 服务 器 ， 所 以 从 
隔离 、 安 全 、 资 源 保障 、 用 户 自主 管理 等 多 个 方面 优势 明显 。 


不 足 之 处 : 操作 性 比较 麻烦 。 特 别 是 对 于 新 手 来 说 ， 要 花 几 天 或 一 个 星期 来 熟悉 才 可 以 自己 随心 所 欲 地 操作 起 来 。 

3. 独 立 主机 服务 器 
独立 主机 是 指 客户 独立 租用 一 台 服 务 器 来 展示 自己 的 网 站 或 提供 自己 的 服务 ， 比 虚拟 主机 空间 更 大 ， 速 度 更 快 ，CPU 计 算 独 立 等 优势 ， 当 然 价格 也 更 贵 。 
好 处 : 对 排名 有 较 好 的 提升 。 这 就 是 为 什么 越 来 越 多 的 人 宁愿 花 点 钱 选 独立 服务 器 ， 而 不 选 价格 最 便宜 的 虚拟 主机 ， 而 且 独 立 服 务 器 还 有 独立 IP。 


不 足 之 处 : 价格 太 贵 了 ， 一 般 小 站 长 都 支撑 不 了 。 所 以 ， 如 果 没 足够 的 资金 还 是 考虑 前 面 两 种 。 一 定 要 对 服务 器 安全 有 一 定 的 认识 才 行 ， 否 则 出 了 安全 漏洞 ， 损 失 就 很 大 了 。 


18.2.2 ”如 何 来 选择 网 站 的 服务 器 空间 
一 个 网 站 是 否 能 够 健康 地 成 长 ， 选 择 一 个 合适 的 服务 器 空间 也 是 非常 重要 的 ， 下 面 就 来 介绍 下 如 何 选择 网 站 的 服务 器 空间 。 


1. 空 间 的 类 型 要 依据 本 人 的 需求 来 定 


目前 的 空间 类 型 很 丰厚 ， 虚 拟 主机 、VPS、 独 立 主机 ， 选 择 很 多 。 对 普通 用 户 来 说 虚拟 主机 和 合租 是 性 价 比 最 高 。 关 于 大 型 网 站 ， 由 于 规模 和 安全 等 要 素 的 思索 ， 可 以 运用 主机 托管 的 方式 ; VPS 则 是 
介 于 虚拟 主机 与 托管 之 间 比 较 好 的 选择 。 云 主机 ， 对 速度 有 很 高 要 求 的 企业 ， 或 许 有 很 多 分 站 的 企业 可 以 思索 ， 采 用 这 种 集群 主机 的 方式 .。 


2. 注 意 同 IP 站 点 的 数目 


很 多 空间 都 是 几 十 人 甚至 几 百 人 共用 的 ， 必 须要 留意 同一 个 服务 器 里 面 网 站 的 数目 ， 网 站 数目 当然 是 越 少 越 好 ， 网 站 越 多 服务 器 的 速度 会 越 慢 。 网 站 太 多 ， 在 安全 方面 也 存在 很 大 的 问题 ， 干 里 之 堤 毁 
于 蚁 六， 只 需 一 个 网 站 安全 有 问题 ， 也 许 整 个 服务 器 就 瘫痪 了 。 


3. 同 IP 站 点 的 质量 要 注重 


我 们 无 法 控制 空间 商 将 服务 器 空间 卖 给 谁 ， 也 控制 不 了 他 人 买 了 空间 会 用 来 做 什么 ， 我 们 能 控制 的 只 有 本 人 的 选择 。 假 如 一 个 服务 器 内 ， 存 在 很 多 的 垃圾 站 ， 我 们 将 站 点 建立 在 这 样 一 个 服务 器 上 ， 那 
根本 上 就 别 想 做 好 了 ， 由 于 一 个 站 点 作 头 ， 连 带 整 个 服务 器 的 网 站 被 黑 的 事例 也 很 多 ， 所 以 在 选择 空间 的 时 候 ， 最 好 要 查 查 同 |P 站 点 的 质量 和 类 型 。 


服务 器 的 稳定 性 也 是 非常 重要 的 ， 如 果 服 务 器 空间 经 常 隔 三 岔 五 地 打 不 开 ， 对 于 网 站 必然 是 巨大 的 打击 。 当 搜索 引擎 蛟 蛛 正 在 怜 行 你 的 网 站 的 时 候 经 常 出 现 突然 无 法 聆 行 的 情况 ， 这 样 肯定 会 让 你 的 网 
站 不 被 搜索 引擎 信任 。 这 样 会 大 大 减少 搜索 引 掌 蜘蛛 的 肛 行 与 抓 取 ， 对 于 网 站 页 面 的 收录 肯定 是 会 受到 影响 的 ， 特 别 是 一 个 没有 任何 权重 的 新 站 ， 搜 索引 掌 会 一 直 认 为 你 的 网 站 没有 准备 好 ， 甚 至 是 认为 你 
关闭 了 网 站 。 所 以 我 们 在 选择 空间 的 时 候 不 能 什么 便宜 买 什么 ， 一 定 要 考量 一 下 主机 的 稳定 性 ， 看 一 看 口碑 如 何 ， 最 好 有 一 段 试 用 时 间 。 
5. 访 问 速度 


很 多 劣质 的 服务 器 空间 打开 的 速度 实在 是 太 慢 ， 这 个 就 严重 影响 到 了 网 站 的 用 户 体验 。 当 我 们 打开 一 个 网 页 反应 太 慢 的 时 候 我 们 往往 会 选择 直接 关闭 这 个 网 站 ， 这 样 就 大 大 地 增加 了 网 站 的 跳出 率 。 同 
时 搜索 引擎 蜂 蛛 来 抓 取 我 们 的 网 页 的 时 候 也 是 以 一 个 游客 的 身份 来 访问 我 们 的 网 站 的 ， 当 蜂 蛛 胞 行 抓 取 网 页 受到 阻挠 的 时 候 可 能 就 放弃 了 继续 胞 行 ， 这 个 时 候 我 们 的 网 站 的 收入 也 会 受到 影响 ， 搜 索引 擎 的 
最 终 目 的 就 是 服务 于 用 户 ， 访 问 速 度 慢 跳 出 率 增高 对 于 网 站 肯定 是 不 利 的 。 所 以 我 们 在 选择 服务 器 空间 的 时 候 一 定 要 选择 访问 速度 快 的 优质 空间 。 

6. 能 否 供 应 数据 备份 


备份 方法 分 为 两 种 ， 一 种 是 空间 商 备份 ， 一 种 是 本 人 打包 下 载 到 当地 备份 。 数 据 备份 可 以 在 网 站 受到 毁坏 的 时 候 ， 最 大 限度 地 挽回 损失 ， 这 个 功用 十 分 适用 。 假 如 空间 商 不 供应 ， 也 不 必 太 在 意 ， 我 们 
可 以 本 人 进行 备份 。 然 而 要 留意 一 个 问题 ， 很 多 空间 商 限制 FTP 的 流量 ， 假 如 我 们 自行 打包 下 载 备份 的 次 数 很 频繁 ， 可 能 会 将 FTP 流 量 用 完 ， 今 后 真正 想 要 添加 文件 的 时 候 ， 没 有 流量 可 用 了 ， 需 要 额定 付费 
去 提高 流量 限制 。 


7. 功 能 支持 


服务 器 的 功能 支持 还 包含 了 很 多 方面 ， 当 然 是 越 完善 越 好 ， 是 否 支 持 URL 静 态 化 就 是 一 个 非常 重要 的 功能 ， 无 论 是 Linux 主 机 还 是 Windows 主 机 都 是 可 以 支持 这 个 功能 的 ， 做 好 URL 静 态 化 对 于 SEO 来 说 
也 是 非常 有 帮助 的 。 同 时 有 的 主机 也 会 支持 301 跳 转 和 404 页 面 ， 直 接 可 以 在 主机 后 台 设 置 ， 使 用 起 来 非常 方便 ， 同 时 还 发 现 有 些 主机 是 不 支持 服务 器 日 志 的 ， 最 好 是 选择 能 够 支持 服务 器 日 志 的 ， 这 样 我 们 
就 可 以 通过 查看 服务 器 日 志 了 解 到 网 站 准确 的 状况 。 


总 而 言 之 一 个 好 的 服务 器 空间 对 于 网 站 的 影响 是 非常 大 的 ， 一 个 稳定 的 空间 可 以 让 网 站 平稳 地 不 断 发 展 ， 一 个 劣质 的 空间 可 能 让 你 前 面 做 出 的 很 多 努力 全 部 白费 ， 所 以 我 们 在 选择 服务 器 空间 的 时 候 一 
ERRE, 


18.23 ”空间 申请 流程 


下 面 以 虚拟 主机 的 申请 流程 为 例 ， 讲 述 在 万 网 申请 空间 的 过 程 ， 具 体操 作 步 骤 如 下 。 


01 进入 万 网 主机 页 面 ， 单 击 “ 主 机 服务 ” 超 链接 ， 如 图 18-4 所 示 。 
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4184 进入 万 网 主机 页 面 


02 在 这 里 选择 主机 类 型 和 型 号 ， 如 图 18-5 所 示 。 


Т) ЗР НИВ Н ки , БОСИ 


Олена ТТ = = 230= RE 430-,ве 


ПЪЛЕН | ЗАТРИ ЕЕ ЗЕЕ, |жж 


2345 元 /年 本 


5 шетін | | ШЕЕ 


8185 ”选择 主机 类 型 和 型 号 


03 ”选择 一 款 虚 拟 主 机 类 型 ， 单 击 底 部 的 “立即 购买 ”按钮 ， 进 入 购物 车 页 面 如 图 18-6 所 示 。 
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图 18-6 ”加 入 购物 车 


04 单 击 “ 立 即 购买 ”按钮 ， 进 入 核对 确认 订单 信息 页 面 ， 如 图 18-7 所 示 。 单 击 “ 去 支付 ” 按钮， 付款 后 即 可 成 功 申请 空间 。 
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图 18-7 ”核对 确认 订单 信息 页 面 


18.3 ”网 站 备案 


为 了 规范 网 络 经 济 秩序 ， 增 加 网 站 经 营 主 体 的 透明 度 ， 保 护 消费 者 和 经 营 者 的 合法 权益 ， 每 个 网 站 均 需 备案 。 


18.3.1 ”什么 是 网 站 备案 

网 站 备案 是 根据 国家 法 律 法 规 ， 需 要 网 站 的 所 有 者 向 国家 有 关 部 门 申请 的 备案 ， 现 在 主要 有 ICP 备 案 和 公安 局 备案 。|CP 备 案 可 以 自主 通过 官方 备案 网 站 http://www.miibeian.9gov.cn 在 线 备 案 或 者 通过 
当地 电信 部 门 两 种 方式 来 进行 备案 。 

互联 网 信息 服务 可 分 为 经 营 性 信息 服务 和 非 经 营 性 信息 服务 两 类 。 


经 营 性 信息 服务 ， 是 指 通过 互联 网 向 上 网 用 户 有 偿 提 供 信息 或 者 网 页 制作 等 服务 活动 。 凡 从 事 经 营 性 信息 服务 业务 的 企 事 业 单 位 应 当 向 省 、 自 治 区 、 直 辖 市 电信 管理 机 构 或 者 国务 院 信 息 产 业主 管 部 门 
申请 办 理 互联 网 信息 服务 增值 电信 业务 经 营 许 可 证 。 申 请 人 取得 经 营 许可 证 后 ， 应 当 持 经 营 许 可 证 向 企业 登记 机 关 办 理 登 记 手续 。 


非 经营 性 互联 网 信息 服务 ， 是 指 通 过 互联 网 向 上 网 用 户 无 偿 提 供 具有 公开 性 、 共 享 性 信息 的 服务 活动 。 几 从 事 非 经 营 性 互联 网 信息 服务 的 企 事 业 单位 ， 应 当 向 省 、 自 治 区 、 直 辖 市 电信 管理 机 构 或 者 国 
务 院 信息 产 业主 管 部 门 申请 办 理 备 案 手续 。 非 经 营 性 互联 网 信息 服务 提供 者 不 得 从 事 有 偿 服 务 。 


1832 为 什么 要 备案 
为 了 规范 互联 网 信息 服务 活动 ， 促 进 互联 网 信息 服务 健康 有 序 发 展 ， 根 据 规 定 ， 国 家 对 经 营 性 互联 网 信息 服务 实行 许可 制度 ， 对 非 经 营 性 互联 网 信息 服务 实行 备案 制度 。 未 取得 许可 或 者 未 履行 备案 手 
续 的 ， 不 得 从 事 互 联网 信息 服务 ， 否 则 就 属于 违法 行为 。 


网 站 备案 的 目的 就 是 为 了 防止 在 网 上 从 事 非 法 的 网 站 经 莒 活动 ， 打 击 不良 互 联网 信息 的 传播 ， 如 果 网 站 不 备案 的 话 ， 很 有 可 能 被 查处 以 后 天 停 ， 非 经 营 性 网 站 自主 备案 是 不 收 任何 手续 费 的 ， 可 以 自行 
到 备案 官方 网 站 去 备案 。 


18.3.3 ”哪些 网 站 需要 |CP 备 案 

根据 国家 有 关 规 定 ， 在 中 华人 民 共 和 国境 内 提供 非 经营 性 互联 网 信息 服务 ， 应 当 办 理 备案 。 未 经 备案 ， 不 得 在 中 华人 民 共 和 国境 内 从 事 非 经 营 性 互联 网 信息 服务 。 而 对 于 没有 备案 的 网 站 将 予以 罚款 或 
关闭。 

(1) 如 果 你 有 一 个 具有 独立 域名 的 非 经 营 性 的 网 站 ， 必 须 办 理 备案 手续 。 


(2) 网 站 备案 用 户 依照 注册 所 在 地 进行 填写 ， 公 司 填写 注册 所 在 地 ， 个 人 填写 户籍 所 在 地 。 


М.У 


(3 


М.У 


网 站 只 有 独立 的 I|P 地 址 ， 没 有 域名 也 需要 办 理 网 上 备案 。 只 要 是 能 访问 到 这 个 网 站 方式 都 要 备案 ， 所 有 绑 定 的 域名 、 二 级 域名 、IP 地 址 都 需要 登记 。 


(4) 网 站 没 做 好 之 前 ， 暂 不 需要 网 上 备案 ， 要 在 网 站 开通 之 前 进行 备案 即 可 。 


М.У 


(5) 同一 用 户 拥有 多 个 域名 ， 并 放 在 同一 服务 器 上 ， 将 只 针对 主体 进行 备案 ， 即 对 网 站 主办 者 进行 备案 ， 多 个 域名 应 在 “域名 列表 ”中 全 部 列 出 。 


(6) 审核 需要 的 时 间 将 按照 流程 尽快 完成 审核 手续 。 时 间 长 短 由 同时 报 备 单位 数量 多 少 而 决定 。 可 经 常 浏览 自己 的 邮箱 ， 如 审核 通过 后 会 将 电子 证 书 发 送 到 你 自己 的 邮箱 里 。 


184 ”完整 备案 基本 流程 


怎样 进行 网 站 的 备案 呢 ? 网 站 备案 具体 有 哪些 流程 呢 ? 下 面 以 使 用 万 网 备案 为 例 讲述 备案 的 流程 。 具 体操 作 步 又 如 下 。 


01 登录 万 网 https://wanwang.aliyun.com， 进 入 用 户 中心 ， 单 击 导 航 “ 更 多 ”菜单 下 的 “备案 ”按钮 ， 如 图 18-8 所 示 。 
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{188 单 击 “备案 ”按钮 
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18-10 “验证 基本 信息 


185 经营 性 网 站 备案 


ICP 备 案 是 属于 网 站 的 ， 每 个 网 站 均 需 备案 ， 备 案 是 免费 的 。 而 ICP 经 营 许可 证 是 属于 公司 的 ， 是 证 明 本 公司 利用 网 站 经 营 


经 营 ， 取 得 合法 性 收入 的 证 件 ， 和 网 站 没有 必然 的 关系 。 


18.5.1 经营 性 网 站 备案 须知 
ICP 经 营 许可 证 必须 直接 在 省 通信 管理 局 或 信 产 部 递交 可 行 性 报告 等 资料 ， 需 要 交纳 一 定 的 行政 费用 ， 受 理 以 后 拿 到 证 件 。 
(1) 通信 地 址 要 详细 ， 明 确 能 够 找到 该 网 站 主办 者 。 


(2) 证 件 地 址 要 详细 ， 按 照 网 站 主办 者 证 件 上 的 注册 地 址 填写 。 


(3) 网 络 购物 、WAP、 即 时 通信 、 网 络 广告 、 搜 索引 擎 、 网 络 游戏 、 电 子 邮箱 、 有 偿 信 息 、 短 信 彩 信服 务 为 经 营 性 质 ， 需 在 当地 通信 管理 局 办 理 增值 电信 业务 许可 证 后 报 备 以 上 网 站 。 非 经 莒 性 主办 
者 勿 随意 报 备 。 


(4) 综合 门户 为 企业 性 质 ， 网 站 主办 者 以 企业 名 义 报 备 。 个 人 只 能 报 备 个 人 性 质 网 站 。 


Ж.Нв 


(5) 博客 、BBS 等 电子 公告 ， 目 前 通信 管理 局 没有 得 到 上 级 主管 部 门 明确 文件 ， 暂 不 受理 ， 请 勿 随意 选择 以 上 服务 内 容 。 


(6) 网 站 名 称 : 不 能 为 域名 、 英 文 、 姓 名 、 数 字 、 三 个 字 以 下 。 


网 站 主办 者 为 个 人 的 ， 不 能 开办 “国字 号 ” “行政 区 域 规划 地 理 名 称 ” 和 “省 会 ”命名 的 网 站 ， 


网 站 主办 者 为 企业 的 ， 不 能 开办 “国字 号 ”命名 的 网 站 ， 如 “中 国 XX 网 ” ， 且 报 备 的 公司 名 称 不 能 超 范 围 ， 如 公司 营业 执照 上 的 公司 名 称 为 “成 都 XX 网 ”请 勿 报 备 “ 四 川 XX 网 ”.。 


(7) 网 站 名 称 或 内 容 若 涉 及 新 闻 、 文 化 、 出 版 、 教 育 、 医 疗 保健 、 药 品 和 医疗 器 械 、 影 视 节 目 等 ， 请 提供 省 级 以 上 部 门 出 示 的 互联 网 信息 服务 前 置 审批 文件 ， 通 信 管 理 局 未 看 到 前 置 审批 批准 文件 前 将 
不 再 审核 以 上 类 型 网 站 的 备案 申请 。 


18.5.2 ”经 营 性 网 站 备案 名 称 规范 


(1) 每 个 经 营 性 网 站 只 能 申请 一 个 网 站 名 称 。 

(2) 经 营 性 网 站 备案 名 称 以 通信 管理 部 门 批准 文件 核准 为 主要 依据 。 
(3) 经 营 性 网 站 名 称 不 得 含有 下 列 内 容 和 文字 : 

` 有 损 于 国家 和 社会 公共 利益 的 。 

` 可 能 对 公众 造成 欺骗 或 者 使 公众 误解 的 。 

` 有 害 于 社会 主义 道德 风尚 或 者 有 其 他 不 良 影响 的 。 
- 其 他 具有 特殊 意义 的 不 宜 使 用 的 名 称 。 

` 法 律 、 法 规 有 禁止 性 规定 的 。 

(4) 使 用 以 下 名 称 的 经 营 性 网 站 备案 申请 不 予 受理 : 
- 网 站 名 称 与 已 备案 的 经 营 性 网 站 名 称 重 复 的 。 

` 使 用 备案 失效 后 未 满 1 年 的 网 站 名 称 的 。 

` 违反 本 办 法 第 三 条 规定 的 。 


- 备案 经 营 性 网 站 名 称 含有 驰名 商标 和 著名 商标 的 文字 部 分 〈 含 中 、 英 文 及 汉语 拼音 或 其 缩写 ) ， 应 当 提交 相关 证 明 材料 。 


第 19 草 ”网 站 的 测试 、 上 传 与 维护 


网 页 制作 完毕 要 发 布 到 网 站 服务 器 上 ， 才 能 让 别人 观看 。 现 在 上 传 用 的 工具 有 很 多 ， 既 可 以 采用 专门 的 FTP 工 具 ， 也 可 以 采用 网 页 制作 工具 本 身 带 有 的 FTP 功 能 。 由 于 市 场 在 不 断 地 变化 ， 网 站 的 内 容 也 
需要 随 之 调整 ， 给 人 常 新 的 感觉 ， 网 站 才 会 更 加 吸引 访问 者 ， 给 访问 者 很 好 的 印象 。 这 就 要 求 对 站 点 进行 长 期 不 间断 地 维护 和 更 新 。 


重点 内 容 
. 站 点 的 测试 
. 网 页 的 上 伟 
. 网 站 的 维护 


. 网 站 安全 维护 


19.1 укай 


在 真正 构建 远 端 站 点 之 前 ， 应 该 在 本 地 先 对 站 点 进行 完整 的 测试 。 检 测 站 点 中 是 否 存在 错误 和 断裂 的 链接 等 ， 以 找 出 其 他 可 能 存在 的 问题 。 


19.1.1 检查 链接 


如 果 网 页 中 存在 错误 链接 ， 这 种 情况 是 很 难 察觉 的 。 采 用 常规 的 方法 ， 只 有 打开 网 页 ， 单 击 链接 时 ， 才 可 能 发 现 错误 。 而 Dreamweaver 可 以 帮助 你 快速 检查 站 点 中 网 页 的 链接 ， 避 免 出 现 链接 错误 ， 具 
体操 作 步 又 如 下 。 


01 ”打开 已 创建 的 站 点 地 图 ， 选 中 一 个 文件 ， 选 择 菜 单 栏 中 的 “站 点 ”| “改变 站 点 链接 范围 的 链接 ”命令 ， 选 择 命 令 后 ， 弹 出 “更 改 整 个 站 点 链接 ”对 话 框 ， 如 图 19-1 所 示 。 


02 在“ 变 成 新 链接 ”文本 框 中 输入 链接 的 文件 ， 单 击 “ 确 定 ” 按钮， 弹出 “更 新 文件 ”对 话 框 ， 单 击 “ 更 新 ”按钮 ， 完 成 更 改 整个 站 点 范围 内 的 链接 ， 如 图 19-2 所 示 。 
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更 改 所 有 的 链接 {H): 


а OW: 


图 19-1 “更改 整个 站 点 链接 ”对 话 框 


70575.5.1/1ndex. htn 


图 19-2 “更 新 文件 ”对 话 杠 


03 ”选择 菜单 栏 中 的 “站 点 ”|“ 检 查 站 点 范围 的 链接 ”命令 ， 打 开 “ 链 接 检 查 器 ”面板 ， 在 “显示 ”选项 中 选择 “ 断 掉 的 链接 ”， 如 图 19-3 所 示 。 


04 在“ 显示” 下拉 列表 中 选择 “外 部 链接 ”， 可 以 检查 出 与 外 部 网 站 链接 的 全 部 信息 ， 如 图 19-4 所 示 。 
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5194 选择 “外 部 链接 ” 


19.1.2 ”站 点 报告 


可 以 对 当前 文档 、 选 定 的 文件 或 整个 站 点 的 工作 流程 或 HTML 属 性 (包括 辅助 功能 ) 运行 站 点 报告 。 使 用 站 点 报告 可 以 检查 可 合并 的 谋 套 字体 标签 、 辅 助 功 和 


删除 的 空 标签 和 无 标题 文档 ， 具 体操 作 步 又 如 下 。 


01 ”选择 菜单 栏 中 的 “站 点 ”| “报告 ”命令 ， 弹 出“ 报告” 对话 框 ， 如 图 19-5 所 示 。 在 对 话 框 中 的 “报告 在 ”下 拉 列 表 中 选择 “整个 当前 本 地 站 点 ”选项 ， 


标签 ”“ 可 移 除 的 空 标签 ”和 “无 标题 文档 ” 复 选 框 。 


02 单 击 “ 运 行 ” 按 钮 ，Dreamweaver 会 对 整个 站 点 进行 检查 。 检 查 完毕 后 ， 将 会 自动 打开 “站 点 报告 ”面板 ， 在 面板 中 显示 检查 结果 ， 如 图 19-6 所 示 。 
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图 19-5 “报告 ”对 话 框 


ШШ 


图 19-6 “站 点 报告 ”面板 


19.1.3 ”清理 文档 


清理 文档 就 是 清理 一 些 空 标签 或 者 在 Word 中 编辑 时 所 产生 的 一 些 多 余 的 标签 ， 具体 操作 步骤 如 下 。 


01 打开 需要 清理 的 网 页 文档 。 选 择 菜单 栏 中 的 “命令 ”| “清理 HTML” 命令， 弹出 “清理 HTML/XHTMI” 对 话 框 ， 在 对 话 框 中 “ 移 除 ” 选 项 中 勾 选 “ 空 标签 区 块 、 和 “多 余 的 谋 套 标签 ” 复 选 框 ， 


或 者 在 “指定 的 标签 ”文本 框 中 输入 所 要 删除 的 标签， 并 在 “选项 ”中 名 选 “ 尽 可 能 合并 襄 套 的 <font> 标 签 ”和 “完成 时 显示 动作 记录 ” 复 选 框 ， 如 图 19-7 所 示 。 


02 ФЕ 确定 按钮 ， Dreamweaver 自 动 开始 清理 工作 。 清 理 完 毕 后 ， 弹 出 一 个 提示 框 ， 在 提示 框 中 显示 清理 工作 的 结果 ， 如 图 19-8 所 示 。 


清理 HTML / XHTML 
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图 19-7 “清理 HTMI/XHTMI” 对话 框 


Dreamweaver > 


图 19-8 ”显示 清理 工作 的 结果 


03 ”选择 菜单 栏 中 的 “命令 ”|“ 清 理 Word 生 成 的 HTMIL” 命 令 ， 弹 出 “清理 Word 生 成 的 HTML” 对 话 框 ， 如 图 19-9 所 示 。 


04 ”在 对 话 框 中 切换 到 “详细 ”选项 卡 ， 匀 选 需要 的 选项 ， 如 图 19-10 所 示 。 


清理 Word 生成 的 HTML 
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图 19-9 “清理 Word 生 成 的 HTML” 对 话 框 


БЕ Word 生成 的 HTML 
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05 单 击 “ 确 定 ” 按 钮 ， 清 理工 作 完 成 后 显示 提示 框 ， 如 图 19-11 所 示 。 


图 19-10 


“详细 ”选项 卡 
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图 19-11 提示 框 


19.2 网 页 的 上 传 


网 页 测试 好 以 后 ， 接 下 来 最 重要 的 就 是 上 传 网 页 。 只 有 将 网 页 上 传 到 远程 服务 器 上 ， 才 能 让 浏览 者 浏览 。 设 计 者 可 以 利用 Dreamweaver 软 件 自 带 的 上 传 功能 ， 也 可 以 利用 专门 的 FTP 软 件 上 传 网 页 。 


19.2.1 利用 Dreamweaver 上 传 网 页 


利用 Dreamweaver 上 传 网 页 具体 操作 步骤 如 下 。 


01 选择 菜单 栏 中 的 “站 点 ”| “管理 站 上 点” 命令， 打开 “管理 站 点 ”对 话 框 ， 单 击 底部 的 “编辑 当前 选 定 的 站 点 ” кәй, 如 图 19-12 所 示 。 


шеттете Ж 


图 19-12 “管理 站 点 ”对 话 框 
02 ”在 打开 的 对 话 框 中 单 击 左 侧 的 “服务 器 ”选项 ， 再 单 击 “ 添 加 新 服务 器 ”按钮 ， 如 图 19-13 所 示 。 打 开 “ 基 本 ”选项 卡 ， 如 图 19-14 所 示 。 
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219-13 “站 点 设置 对 象 ” 对 话 框 


A1914 设置 “基本 ”选项 卡 


“基本 ”选项 卡 中 有 以 下 参数 。 

- 服务 器 名 称 : 输入 服务 器 的 名 称 。 

` 连接 方法 : 选择 要 连接 的 方法 ， 这 里 选择 连接 FIP 选 项 。 
“FIP 地 址 : 输入 远程 站 点 的 FTP 主 机 的 IP 地 址 。 

ЭРА: 输入 用 于 连接 到 FTP 服 务 器 的 登录 名 。 

жп: 输入 用 于 连接 到 FTP 服务 器 的 密码 。 

“КВ: Diteamweavet 保 存 连 接 到 远程 服务 器 时 输入 的 密码 。 
` 测试 : 测试 连接 到 FIP 是 否 成 功 。 

-RAR 设置 服务 器 的 根 目录 。 

. Web URL: 输入 Internet 信 息 服务 器 的 JP 地址 。 

03 ”设置 完 相 关 的 参数 后 ， 单 击 “ 保 存 ” 按 钮 完成 远程 信息 设置 。 


04 ”连接 到 服务 器 后 ， 按 钮 会 自动 变 为 闭合 状态 ， 并 在 一 穷 亮 起 一 个 小 绿灯 ， 列 出 远 端 网 站 的 接收 目录 ， 右 侧 窗 口 显 示 为 “本 地 信息 ”， 在 本 地 目录 中 选择 要 上 传 的 文件 ， 单 击 “ 上 传 文件 ”按钮 ， 上 
传 文件 ， 如 图 19-15 所 示 。 
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919-15 单 击 “上 传 文件 ” 8 按钮 


19.2.2 ”使 用 LeapFtp 软 件 上 传 文件 


当 网 站 制作 完成 以 后 ， 就 要 上 传 到 远程 服务 器 上 供 浏览 者 预览 ， 这 样 所 做 的 网 页 才 会 被 别人 看 到 。 网 站 发 布 流程 第 一 步 : 申请 一 个 域名 ; 第 二 步 : 申请 一 个 空间 服务 器 ; 第 三 步 : 上 传 网 站 到 服务 器 。 


上 传 网 站 有 两 种 方法 ， 一 种 是 用 Dreamweaver 自 带 的 工具 上 传 ， 一 种 是 FTP 软 件 上 传 ， 下 面 将 详细 讲述 使 用 LeapFtp 上 传 方法 。LeapFtp 是 一 款 功 能 强大 的 FTP 软 件 ， 友 好 的 用 户 界面 ， 稳 定 的 传输 速 
， 连 接 更 加 方便 。 支 持 断 点 续 传 功能 ， 可 以 下 载 或 上 传 整个 目录 ， 也 可 直接 删除 整个 目录 。 


Ж 


01 下载 并 安装 最 新 LeapFtp 软 件 ， 运 行 LeapFtp， 选 择 菜单 栏 中 的 “站 点 ”|“ 站 点 管理 器 ”命令 ， 如 图 19-16 所 示 。 


02 弹出 “站 点 管理 器 ”对 话 框 ， 在 对 话 框 中 执行 “站 点 ”| “新 建 ”|“ 站 点 ”命令 ， 如 图 19-17 所 示 。 
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19-17 执行 “新 建站 点 ”命令 


03 在 弹出 的 窗口 中 输入 你 喜欢 的 站 点 名 称 ， 如 图 19-18 所 示 。 


04 单 击 “ 确 定 ” 按 钮 后 ， 出 现 以 下 界面 。 在 “地 址 ”处 输入 站 点 地 址 ， 将 “匿名 登录 ”前 的 选 钩 去 掉 ， 在 “用 户 名 ”处 输入 FTP 用户 名 ， 在 “口令 ”处 输入 FIP 密 码 ， 如 图 19-19 所 示 。 


919-18 输入 站 点 名 称 
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919-19 输入 站 点 地 址 密码 


05 单 击 “连接 ” 按钮， 直接 进 入 连接 状态 ， 左 框 为 本 地 目录 ， 可 以 通过 下 拉 菜 单 选择 你 要 上 传 文件 的 目录 ， 选 择 要 上 传 的 文件 ， 并 右 击 ， 在 弹出 菜单 中 选择 “上 传 ”命令 ， 如 图 19-20 所 示 。 
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819-20 选择“ 上传” 命令 


06 ”这 时 在 队列 栏 里 会 显示 正在 上 传 及 未 上 传 的 文件 ， 当 文件 上 传 完成 后 ， 此 时 在 右 侧 的 远程 目录 栏 里 就 可 以 看 到 你 上 传 的 文件 了 。 


193 ”网 站 的 维护 


网 站 维护 ， 一 个 好 的 网 站 需要 定期 或 不 定期 地 更 新 内 容 ， 才 能 不 断 地 吸引 更 多 的 浏览 者 ， 增 加 访问 量 。 网 站 维护 是 为 了 让 您 的 网 站 能 够 长 期 稳定 地 运行 在 Internet 上 。 


19.3.1 ”网 站 内 容 维护 

对 于 网 站 来 说， 只 有 不 断 地 更 新 内 容 ， 才 能 保证 网 站 的 生命 力 ， 否 则 网 站 不 仪 不 能 起 到 应 有 的 作用 ， 反 而 会 对 企业 自身 形象 造成 不 良 影响 。 如 何 快捷 方便 地 更 新 网 页 ， 提 高 更 新 效率 ， 是 很 多 网 站 面临 
的 难题 。 现 在 网 页 制作 工具 不 少 ， 但 为 了 更 新 信息 而 日 复 一 日 地 编辑 网 页 ， 对 网 站 维护 人 员 来 说 ， 疲 于 应 付 是 普遍 存在 的 问题 。 

内 容 更 新 是 网 站 维护 过 程 中 的 重要 一 环 。 可 以 考虑 从 以 下 5 个 方面 入 手 ， 使 网 站 能 长 期 顺利 地 运转 。 


第 一 ， 在 网 站 建设 初期 ， 就 要 对 后 续 维护 给 予 足够 的 重视 ， 要 保证 网 站 后 续 维护 所 需 资金 简 人 力 。 很 多 网 站 建设 时 很 舍得 投入 资金 。 可 是 网 站 发 布 后 ， 维 护 力 度 不 够 ， 信 息 更 新 工作 迟 迟 跟 不 上 。 网 站 
建成 之 时 ， 便 是 网 站 死亡 的 开始 。 


第 二 ， 要 从 管理 制度 上 保证 信息 渠道 的 通畅 和 信息 发 布 流程 的 合理 性 。 网 站 上 各 栏目 的 信息 往往 来 源 于 多 个 业务 部 门 ， 要 进行 统筹 考虑 ， 确 立 一 套 从 信息 收集 、 信 息 审查 到 信息 发 布 的 良性 运转 的 管理 
制度 。 既 要 考虑 信息 的 准确 性 和 安全 性 ， 又 要 保证 信息 更 新 的 及 时 性 。 要 解决 好 这 个 问题 ， 领 导 的 重视 是 前 提 。 


第 三 ， 在 建设 过 程 中 要 对 网 站 的 各 个 栏目 和 子 栏目 进行 尽量 细致 的 规划 ， 在 此 基础 上 确定 哪些 是 经 常 要 更 新 的 内 容 ， 哪 些 是 相对 稳定 的 内 容 。 根 据 相 对 稳定 的 内 容 设计 网 页 模板 ， 在 以 后 的 维护 工作 
中 ， 这 些 模板 不 用 改动 ， 这 样 既 省 费用 ， 又 有 利于 后 续 维护 。 


第 四 ， 对 经 常 变 更 的 信息 ， 尽 量 建立 数据 库 管理 ， 以 避免 数据 杂乱 无 章 的 现象 。 如 果 采 用 基于 数据 库 的 动态 网 页 方案 ， 则 在 网 站 开发 过 程 中 ， 不 但 要 保证 信息 浏览 的 方便 性 ， 还 要 保证 信息 维护 的 方便 
|. 


第 五 ， 要 选择 合适 的 网 页 更 新 工具 。 信 息 收集 起 来 后 ， 如 何 制 作 网 页 ， 采 用 不 同 的 方法 ， 效 率 也 会 大 大 不 同 。 比 如 使 用 Notepad 直 接 编辑 HTML 文 档 与 用 Dreamweaver 等 可 视 化 工具 相 比 ， 后 者 的 效率 
自然 高 得 多 。 若 既 想 把 信息 放 到 网 页 上 ， 又 想 把 信息 保存 起 来 以 备 以 后 再 用 ， 那 么 采用 能 够 把 网 页 更 新 和 数据 库 管理 结合 起 来 的 工具 效率 会 更 高 。 


19.3.2 ”网 站 备份 


作为 一 个 网 站 的 拥有 着 和 管理 者 ， 网 站 是 我 们 最 大 的 财富 ， 在 面 对 错 综 复 杂 的 网 络 环境 时 ， 必 须 保证 网 站 的 正常 运作 ， 但 很 多 的 情况 是 我 们 无 法 掌控 和 预测 的 ， 如 黑客 的 入 侵 、 硬 件 的 损坏 、 人 为 的 误 
操作 等 ， 都 可 能 对 网 站 产生 毁灭 性 的 打击 。 所 以 ， 我 们 应 该 定期 备份 网 站 数据 ， 在 遇 到 上 述 意外 时 能 将 损失 降低 到 最 小 。 网 站 备份 并 不 复杂 ， 可 以 通过 网 站 系统 自 带 的 一 些 备 份 功能 轻松 实现 备份 ， 最 重要 
的 就 是 建立 起 网 站 备份 的 观念 和 习惯 。 


1. 整 站 的 备份 


对 于 网 站 文件 的 备份 ， 或 者 说 整 站 目录 的 备份 。 一 般 网 站 文件 有 变动 的 情况 下 ， 肯 定 是 要 备份 一 次 的 ， 如 网 站 模板 的 变更 、 网 站 功能 的 增删 ， 这 类 备份 的 目的 主要 是 担心 网 站 文件 的 变动 引起 整 站 的 不 
稳定 或 造成 网 站 其 他 功能 和 文件 的 丢失 。 一 般 来 说 ， 由 于 文件 的 变动 频率 较 小 ， 备 份 的 周期 相对 较 长 ， 可 以 在 每 次 变动 网 站 相关 文件 前 ， 进 行 网 站 文件 的 备份 。 对 于 网 站 文件 或 者 说 整 站 目录 的 备份 ， 一 般 
可 以 通过 远程 目录 打包 的 方式 ， 将 整 站 目录 打包 并 且 下 载 到 本 地 ， 这 种 方式 是 最 简便 的 。 而 对 于 一 些 大 型 网 站 ， 网 站 目录 包含 大 量 的 静态 页 面 、 图 片 和 其 他 的 一 些 应 用 程序 ， 可 以 通过 FTP 数 据 备份 工具 ， 
将 网 站 目录 下 的 相关 文件 直接 下 载 本 地 ， 根 据 备 份 时 间 在 本 地 实现 定期 打包 和 蔡 换 。 这 样 可 以 最 大 限度 地 保证 网 站 的 安全 性 和 完整 性 。 


2. 数 据 库 的 备份 


数据 库 对 于 一 个 网 站 来 说 ， 其 重要 性 不 言 而 喻 。 网 站 文件 损坏 ， 可 以 通过 一 些 技术 还 原 手 段 实 现 ， 如 模板 文件 丢失 ， 我 们 换 一 套 模 板 ; 网 站 文件 丢失 ， 我 们 可 以 再 重新 安装 一 次 网 站 程序 ;但 如 果 数 据 
库 丢 失 ， 相 信 技 术 再 强 的 站 长 也 是 无 力 回 天 。 相 对 于 网 站 数据 库 而 言 ， 变 动 的 频率 就 很 大 了 ， 备 份 的 频率 相对 来 说 会 更 频繁 一 些 。 一 般 一 些 服务 较 好 的 IDC， 通 常 是 每 周 帮 忙 备份 一 次 数据 库 。 对 于 一 些 运 
用 建站 CMSs 做 网 站 的 站 长 来 说 ， 在 后 台 都 有 非常 方便 的 数据 库 一 键 备份 ， 通 过 自动 备份 到 指定 的 网 站 文件 夹 当 中 ， 如 果 你 还 不 放心 ， 可 以 使 用 FTP 工 具 ， 将 远程 的 备份 数据 库 下 载 到 本 地 ， 真 正 实现 数据 库 
的 本 地 、 异 地 双 备份 。 


194 网 站 安全 维护 


Web 应 用 的 发 展 ， 使 网 站 产生 越 来 越 重要 的 作用 ， 而 越 来 越 多 的 网 站 在 此 过 程 中 也 因为 存在 安全 隐患 而 遭受 到 各 种 攻击 ,例如 网 页 被 挂 马 、 网 站 SQL 注 入 导致 网 页 被 自 改 、 网 站 被 查封 ， 甚 至 被 利用 成 
为 传播 木马 给 浏览 网 站 用 户 的 一 个 载体 。 


19.4.1 ” NTFS 权限 的 设置 


NTFS 是 随 着 Windows NT 操作 系统 而 产生 的 ， 并 随 着 Windows NT4 跨 入 主力 分 区 格式 的 行列 ， 它 的 优点 是 安全 性 和 稳定 性 很 好 ， 在 使 用 中 不 易 产 生 文件 碎片 。NTFS 分 区 对 用 户 权限 做 出 了 非常 严格 
的 限制 ， 每 个 用 户 都 只 能 按 着 系统 赋予 的 权限 进行 操作 ， 任 何 试图 越权 的 操作 都 将 被 系统 禁止 。 同 时 NTF 提 供 了 容错 结构 日 志 ， 可 以 将 用 户 的 操作 全 部 记录 下 来 ， 从 而 保护 了 系统 的 安全 。 与 FAT 文 件 系统 
相 比 ，NTFS 文 件 系 统 最 大 的 特点 是 安全 。 可 以 为 NTFS 分 区 或 文件 夹 指定 权限 ， 来 避免 受到 本 地 或 远程 的 非法 访问 。 也 可 以 对 位 于 NTFS 分 区 中 的 文件 单独 设置 权限 ， 避 免 本 地 或 远程 用 户 的 非法 使 用 。 


下 面 将 介绍 如 何 设置 文件 夹 “Web” 的 权限 ， 解 决 在 编辑 、 更 新 或 删除 操作 时 ， 网 页 出 现 的 数据 库 被 占用 或 用 户 权限 不 足 的 问题 ， 具 体操 作 步 又 如 下 。 
01 选中 文件 夹 “04”， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “属性 ”命令 ， 打 开 “04 属 性 ”对 话 框 ， 切 换 至 “安全 ”选项 卡 ， 如 图 19-21 所 示 。 


02 打开 “04 的 权限 ”对 话 框 ， 单 击 “ 添 加 ”按钮 ， 如 图 19-22 所 示 。 
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图 19-21 “安全 ”选项 卡 
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619-222 9% “Жж” Jin 
03 ”在 弹出 的 “选择 用 户 或 组 ”对 话 框 中 ， 添 加 Everyone 用 户 组 ， 如 图 19-23 所 示 。 


04 单 击 “ 确 定 ” 按 钮 ， 返回 到 “04 的 权限 ”对 话 框 ， 选 中 “组 或 用 户 名 ”列表 中 的 Everyone 用 户 组 ， 并 在 其 下 的 权限 列表 中 ， 选 中 “修改 ”选项 ， 单 击 “确定 ” 按 钮 即 可 ， 如 图 19-24 所 示 。 
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图 19-23 “选择 用 户 或 组 ”对 话 框 
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# 19-24 设置 用 户 组 权限 


1942 ”安装 必要 的 安全 软件 


除了 通过 各 种 手动 方式 来 保护 服务 器 操作 系统 外 ， 还 应 在 计算 机 中 安装 并 使 用 必要 的 防 黑 软 件 、 杀 毒 软件 和 防火 墙 。 在 上 网 时 打开 它们 ， 这 样 即便 有 黑客 进攻 服务 器 ， 系 统 的 安全 也 是 有 保证 的 。 


病毒 的 发 作 给 全 球 计算 机 系统 造成 巨大 损失 ， 令 人 们 谈 “ 毒 ” 色 变 。 上 网 的 人 中 ， 很 少 有 谁 没 被 病毒 侵害 过 。 对 于 一 般 用 户 而 言 ， 首 先 要 做 的 就 是 为 电脑 安装 一 套 正 版 的 杀毒 软件 。 


现在 不 少 人 对 防 病毒 有 个 误区 ， 就 是 对 待 电 脑病 毒 的 关键 是 “ 杀 ” ， 其 实 对 待 电 脑病 毒 应 当 是 以 “ 防 ”为 主 。 


因此 应 当 安装 杀毒 软件 的 实时 监控 程序 ， 应 该 定期 升级 所 安装 的 杀毒 软件 (如果 安 装 的 是 网 络 版 ， 在 安装 时 可 先 将 其 设 定 为 自动 升级 ) ， 给 操作 系统 打 相 应 补丁 、 升 级 引擎 和 病毒 定义 码 。 每 周 要 对 电 
脑 进 行 一 次 全 面 的 杀毒 、 扫 描 工 作 ， 以 便 发 现 并 清除 隐藏 在 系统 中 的 病毒 。 当 用 户 不 愤 感 染 上 病毒 时 ， 应 该 立即 将 杀毒 软件 升级 到 最 新 版 本 ， 然 后 对 整个 硬盘 进行 扫描 操作 ， 清 除 一 切 可 以 查 杀 的 病毒 。 


